React Native Responsive design for screen rotation

Question

I am using React Native to create an iOS and Android App. The app contains responsive design, so that it fits all the screen sizes in Android and iOS smartphones. But when user rotates the phone, the UI just got cluttered, on some phones it split into half of the screen and half screen is white. Don't know the exact issue, it is working on small and larger devices perfectly but having these issues on screen rotation, is there anything needs to be done specially for screen rotation responsive design?

Any help would be really appreciated!

score 0 · Answer 1 · answered Apr 22 '23 at 19:44

You could try a npm package called react-native-responsive-screen

This allows for a responsive screen when rotating. Here is a example

import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
  listenOrientationChange as lor,
  removeOrientationListener as rol
} from 'react-native-responsive-screen';

class Login extends Component {
  componentDidMount() {
    lor(this);
  }
  
  componentWillUnmount() {
    rol();
  }

  render() {
    const styles = StyleSheet.create({
      container: { flex: 1 },
      textWrapper: {
        height: hp('70%'),
        width: wp('80%')
      },
      myText: { fontSize: hp('5%') }
    });
  
    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
          <Text style={styles.myText}>Login</Text>
        </View>
      </View>
    );
  }
}

export default Login;

you must put the styles in the render so it recalculates.

alternatively if you are using expo you can detect screen changes with expo-screen-orientation

React Native Responsive design for screen rotation

1 Answers1