Skip to content
This repository was archived by the owner on Feb 19, 2022. It is now read-only.

Commit 6dc6c78

Browse files
committed
Improve documentation
1 parent 03393d2 commit 6dc6c78

File tree

1 file changed

+46
-2
lines changed

1 file changed

+46
-2
lines changed

README.md

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Simply import `StyleSheet` and any React components from `react-native-responsiv
1414
import {
1515
View,
1616
Image,
17+
ScrollView,
1718
StyleSheet
1819
} from 'react-native-responsive-styles';
1920
```
@@ -48,11 +49,54 @@ const styles = StyleSheet.create({
4849
});
4950
```
5051

51-
Plain style objects will work as well, as long as you use the components from this package.
52+
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.
53+
54+
That's it!
5255

5356
### Demo
5457
![Demo](/docs/responsive-styles.gif)
5558

59+
### Advanced features
60+
61+
#### Animate transitions
62+
63+
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`.
64+
```js
65+
StyleSheet.configureLayoutAnimation('spring');
66+
```
67+
68+
The default behaviour is no animation, but configuring one is recommended to avoid visual glitches when rearranging elements.
69+
70+
#### Make your custom components responsive
71+
72+
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`:
73+
```js
74+
import React from 'react';
75+
import { makeResponsive } from 'react-native-responsive-styles';
76+
77+
class CustomComponent extends React.Component({
78+
//...
79+
});
80+
81+
export default makeResponsive(CustomComponent);
82+
```
83+
84+
In most cases this should not be required. You can simply nest your component in a responsive `View`.
85+
86+
#### Hiding elements
87+
88+
A common use case is to hide an element entirely in one orientation. You can use `StyleSheet.hidden` for that:
89+
```js
90+
const styles = StyleSheet.create({
91+
landscapeOnly: {
92+
flex: 1,
93+
portrait: StyleSheet.hidden
94+
}
95+
})
96+
```
97+
5698
### Please note
5799

58-
This project is in a pre-pre-**pre**-release state. One day it may be in a release state.
100+
This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.
101+
102+
[MIT licensed](LICENSE)

0 commit comments

Comments
 (0)