react-native-orientation-view

2.0.6 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-orientation-view

Weekly Downloads

1

Version

2.0.6

License

MIT

Unpacked Size

13.4 kB

Total Files

27

Last publish

Collaborators

  • nklhrstv