Skip to content

Commit

Permalink
add an example of usage for orientation change
Browse files Browse the repository at this point in the history
  • Loading branch information
abdallahm committed Aug 10, 2016
1 parent f1d672a commit 32cd544
Showing 1 changed file with 17 additions and 15 deletions.
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -264,13 +264,13 @@ const styles = EStyleSheet.create({
});
```

An idea for the orientation change support, it requires using another package for detecting the orientation change event, like react-native-orientation
Here is an example of the orientation change:

```js
var Orientation = require('react-native-orientation');
var styles = EStyleSheet.create({
card: {
height: 200,
backgroundColor: 'green'
},
'@media all and (orientation: portrait)': {
card: {
Expand All @@ -283,20 +283,22 @@ var styles = EStyleSheet.create({
}
}
});
```
inside your component use:
```js
componentDidMount() {
Orientation.addOrientationListener(this._orientationDidChange.bind(this));
}
componentWillUnmount() {
Orientation.removeOrientationListener(this._orientationDidChange);
}
_orientationDidChange(orientation) {
styles = EStyleSheet.orientationUpdate(orientation, styles);
this.forceUpdate();
class example extends React.Component {
onLayoutChange(event){
var updatedStyles = EStyleSheet.orientationUpdate(event, styles);
if(updatedStyles){
styles = updatedStyles;
this.forceUpdate();
}
}
render() {
console.warn('render');
return (
<View onLayout={ this.onLayoutChange.bind(this) } style={styles.card}>...</View>
)
}
}
```

Expand Down

0 comments on commit 32cd544

Please sign in to comment.