React-Native: Screen gets cut in half

user_8945386 0
Viewed 1005

I've encountered the following bug with react-native:

As soon as I rotate my smartphone and then turn it back to normal, my screen gets cut in half, the lower half of my scrollview is now completely white. This also happens when I call react-native-modal and dismiss it.

Does any know how to handle this?

react-native scrollview
1 Answers

This is a classic scenario of how you have built your components on every screen of app.This may occur even if you test it out in different phones, like phones which have large screen height / width. If you use dynamic width and height or every component, your app would look the same in both portrait and landscape mode.

Suppose you set a <View style={{height:50}} /> , and now 50 in every phone and in landscape mode is different. suppose you a screen resolution of 360(w)*640(h) . Now when you landscape it, it just reverses. now height is just 360(h). So it may happen your screen gets cut.

I would suggest get device height and width:

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

Now suppose you want to have a view of height 50, and that's 50 or your phone looks good nad you know your phone height is 640, so simple you can calculate 50/640= 0.078 . SO now you can create a dynamic View with like this :

<View style={{height:0.078*windowHeight}} />

Now in every screen it will make a responsive design

hope it helps. feel free for doubt

user_113553030
Related