Menu
After much research I have discovered that the Dimensions library for Android does not work like it is supposed to. For example, Each time I use "Dimensions.get('window').height", I get a different results.
This is documented on git:
Dimensions.get('window').height is sometimes wrong on Android
The solution is to use "getRealDimensions" library as is mentioned on the git link above.
This is the link to the 'getRealDimensions' but it is written in java and I have no idea how to implement it into my react-native android project.
Summary
How can I implement the 'getRealDimensions' library into my react-native android project?
Thanks.
335
Hello everyone welcome to this new article where we are going to explore a new concept, the React Native Dimensions. Dimensions in React Native is the default API by which we can calculate the width and the height of the screen or app window.
import { Dimensions } from 'react-native'; You can get the application window's width and height using the following code: const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height;
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet ).
For starters, the Dimensions API has a different behaviour if the device is in portrait or landscape modes. In portrait, it doesn't seem to account for the status bar height, however, it does include the status bar height in landscape. So the code to get the current screen height has to consider whether or not it is in in portrait or landscape.
For those still struggling with this problem, here is a small insight I can give.
First the API react-native (0.54) seems to be stable for Android, the call to Dimensions.get('window') returns the same value every time (at least from what I saw). On Android though, the height returned by this call is the screen with the Status Bar (i.e. the bar at the top of the screen with the wifi icon and notifications).
Second if you want to get only the height of the screen without the soft menu bar just call StatusBar.currentHeight and substract this value from the height given by Dimensions.get('window').height.
This method is fairly easy and avoid the dependance to another package (even though react-native-extra-dimensions-android is really good).
Finally if you need the total size of the screen have a look at Dimensions.get('screen'), see What's the difference between 'window' and 'screen' in the Dimensions API
Cheers
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
