React Native styles that respond to device orientation change
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
You can then define custom style properties for
const styles = StyleSheet;
StyleSheet.create is not required. Plain style objects will work as well, as long as you use the React components from this package.
You can apply a LayoutAnimation to orientation changes. Valid animation values are
The default behaviour is no animation, but configuring one is recommended to avoid visual glitches when rearranging elements.
Make your custom components responsive
To add support for orientation-specific styles to your own components or other third-party components, wrap them in a higher-order component with
In most cases this should not be required. You can simply nest your component in a responsive
A common use case is to hide an element entirely in one orientation. You can use
StyleSheet.hidden for that:
const styles = StyleSheet
This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.