react-native-orientation-view

react-native-orientation-view

This component gives you an alternative way of writing orientation(size) specific UI in ReactNative by changing the ui on the UI Thread instead of JS thread.

This plugin exports three react components: OrientationView, LandscapeView, PortraitView.

OrientationView render its content based on its size.

The iOS implementation is not native yet and fallbacks to the Dimensions approach. It requires one additional property, initialIsInPortrait.

How would you do the same using this plugin:

render() {
  return (
    <OrientationView style={{flex: 1}}>
      <LandscapeView style={StyleSheet.absoluteFill}>{this.renderLandscape()}</LandscapeView>
      <PortraitView style={StyleSheet.absoluteFill}>{this.renderPortrait()}</PortraitView>
    </OrientationView>
  );
}

How would you declare orientation(size) specific UI in vanilla RN:

render() {
  const {height, width} = Dimensions.get('window');
  if (height >= width) {
    return this.renderPortrait();
  } else {
    return this.renderLandscape();
  }
}

Or even worse using react-native-orientation