Name: react-native-responsive-styles
Owner: Formidable
Description: React Native styles that respond to orientation change
Created: 2016-09-27 20:24:37.0
Updated: 2018-01-10 22:18:04.0
Pushed: 2017-09-27 01:48:35.0
Homepage: null
Size: 233
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Installation:
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:
t-native link react-native-orientation-listener
You can now import StyleSheet
and any React components from react-native-responsive-styles
instead of react-native
:
rt {
ew,
age,
rollView,
yleSheet
om 'react-native-responsive-styles';
You can then define custom style properties for landscape
and portrait
orientations:
t styles = StyleSheet.create({
ntainer: {
flex: 1,
// define separate styles for portrait and landscape
portrait: {
flexDirection: 'column'
},
landscape: {
flexDirection: 'row'
}
inContent: {
flex: 8,
// override a default value when orientation is landscape
landscape: {
flex: 1
}
condaryContent: {
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
.
eSheet.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 StyleSheet.makeResponsive
:
rt React from 'react';
rt StyleSheet from 'react-native-responsive-styles';
s CustomComponent extends React.Component({
...
rt default StyleSheet.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:
t styles = StyleSheet.create({
ndscapeOnly: {
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.