Installation:

npm i --save react-native-responsive-styles

This library depends on walmartlabs/react-native-orientation-listener, which contains native dependencies for iOS and Android. Link them with:

react-native link react-native-orientation-listener

You can now import StyleSheet and any React components from react-native-responsive-styles instead of react-native:

import {
  View,
  Image,
  ScrollView,
  StyleSheet
} from 'react-native-responsive-styles';

You can then define custom style properties for landscape and portrait orientations:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // define separate styles for portrait and landscape
    portrait: {
      flexDirection: 'column'
    },
    landscape: {
      flexDirection: 'row'
    }
  },
  mainContent: {
    flex: 8,
    // override a default value when orientation is landscape
    landscape: {
      flex: 1
    }
  },
  secondaryContent: {
    flex: 1,
    // override a default value when orientation is portrait
    portrait: {
      backgroundColor: '#ccc'
    }
  }
});

Usage of StyleSheet.create is not required. Plain style objects will work as well, as long as you use the React components from this package.

That's it!

You can apply a LayoutAnimation to orientation changes. Valid animation values are spring, linear and easeInEaseOut.

StyleSheet.configureLayoutAnimation('spring');

The default behaviour is no animation, but configuring one is recommended to avoid visual glitches when rearranging elements.

To add support for orientation-specific styles to your own components or other third-party components, wrap them in a higher-order component with makeResponsive:

import React from 'react';
import { makeResponsive } from 'react-native-responsive-styles';

class CustomComponent extends React.Component({
  //...
});

export default makeResponsive(CustomComponent);

In most cases this should not be required. You can simply nest your component in a responsive View.

A common use case is to hide an element entirely in one orientation. You can use StyleSheet.hidden for that:

const styles = StyleSheet.create({
  landscapeOnly: {
    flex: 1,
    portrait: StyleSheet.hidden
  }
})

This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.

MIT licensed