Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FormidableLabs/react-native-responsive-styles
React Native styles that respond to orientation change
https://github.com/FormidableLabs/react-native-responsive-styles
orientation orientation-changes react-native stylesheets
Last synced: about 2 months ago
JSON representation
React Native styles that respond to orientation change
- Host: GitHub
- URL: https://github.com/FormidableLabs/react-native-responsive-styles
- Owner: FormidableLabs
- License: mit
- Archived: true
- Created: 2016-09-27T20:24:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-18T22:24:30.000Z (over 2 years ago)
- Last Synced: 2024-04-05T00:03:05.526Z (about 2 months ago)
- Topics: orientation, orientation-changes, react-native, stylesheets
- Language: JavaScript
- Size: 229 KB
- Stars: 170
- Watchers: 57
- Forks: 22
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- Awesome-React-Native-Education - Responsive Layouts
README
react-native-responsive-styles
React Native styles that respond to device orientation change
***
### How-to
Installation:
```
npm i --save react-native-responsive-styles
```
This library depends on [walmartlabs/react-native-orientation-listener](https://github.com/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`:
```js
import {
View,
Image,
ScrollView,
StyleSheet
} from 'react-native-responsive-styles';
```
You can then define custom style properties for `landscape` and `portrait` orientations:
```js
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!
### Demo
### Advanced features
#### Animate transitions
You can apply a [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html) to orientation changes. Valid animation values are `spring`, `linear` and `easeInEaseOut`.
```js
StyleSheet.configureLayoutAnimation('spring');
```
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 `StyleSheet.makeResponsive`:
```js
import React from 'react';
import StyleSheet from 'react-native-responsive-styles';
class CustomComponent extends React.Component({
//...
});
export default StyleSheet.makeResponsive(CustomComponent);
```
In most cases this should not be required. You can simply nest your component in a responsive `View`.
#### Hiding elements
A common use case is to hide an element entirely in one orientation. You can use `StyleSheet.hidden` for that:
```js
const styles = StyleSheet.create({
landscapeOnly: {
flex: 1,
portrait: StyleSheet.hidden
}
})
```
### Please note
This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.
[MIT licensed](LICENSE)
## Maintenance Status
**Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!