-
-
Notifications
You must be signed in to change notification settings - Fork 143
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change README to be more readable and add new README files in example…
… repos (#5) * Add example repositories & 1 small bug fix (#3) * Create responsive-screen example repo with the help of create-react-native-app * Add react-native-responsive-screen package to be demonstared in this example repo * Add sample code with the use of StyleSheet.create * Remove create-react-native-app auto generated content * Initial commit of example repo with the use of styled components * Add example on how to use react-native-responsive-package with styled components * Create example repo that supports screen's responsiveness on orientation change * Fix dimensions' variables declaration * Add react-native-responsive-screen in dependencies of the example repo * Add sample code on how to use responsive methods with orientation change support * Remove generic content of create-react-native-app and add repo explanation * Fix code errors at usage documentation * Reduce README size on initial description and usage examples * Reduce README size further on introduction and inspiration sections * Add usage example * Add usage example * Remove usage examples and add links to the example repositories * Add usage example * Add contents * Update contents links so that they don't redirect * Fix contents' links
- Loading branch information
Tasos Maroudas
authored
May 6, 2018
1 parent
0c1f9e8
commit 9ea04ef
Showing
4 changed files
with
125 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,47 @@ | ||
| This is an example repository that contains a sample setup of react-native-responsive-screen package with support of device orientation changes. | ||
|
|
||
| This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). | ||
| # Usage | ||
|
|
||
| In order to detect orientation change, there are 2 differences from the simple case: | ||
| * we add a listener function in every screen that supports orientation change (and a remove listener function respectively) | ||
| * we move the stylesheet creation inside the render function, so that the styles are recalculated whenever we detect an orientation change (and therefore trigger a rerender). | ||
|
|
||
| ```javascript | ||
| import { | ||
| widthPercentageToDP as wp, | ||
| heightPercentageToDP as hp, | ||
| listenOrientationChange as lor, | ||
| removeOrientationListener as rol | ||
| } from 'react-native-responsive-screen'; | ||
|
|
||
| class Login extends Component { | ||
| componentDidMount() { | ||
| lor(this); | ||
| } | ||
|
|
||
| componentWillUnMount() { | ||
| rol(); | ||
| } | ||
|
|
||
| render() { | ||
| const styles = StyleSheet.create({ | ||
| container: { flex: 1 }, | ||
| textWrapper: { | ||
| height: hp('70%'), | ||
| width: wp('80%') | ||
| }, | ||
| myText: { fontSize: hp('5%') } | ||
| }); | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <View style={styles.textWrapper}> | ||
| <Text style={styles.myText}>Login</Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Login; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,35 @@ | ||
| This is an example repository that contains a sample setup of react-native-responsive-screen package with use of styled components. | ||
|
|
||
| This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). | ||
| # Usage | ||
|
|
||
| ```javascript | ||
| import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| class Login extends Component { | ||
| render() { | ||
| return ( | ||
| <Container> | ||
| <TextWrapper> | ||
| <Login>Login</Login> | ||
| </TextWrapper> | ||
| </Container> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const Container = styled.View` | ||
| flex: 1; | ||
| `; | ||
|
|
||
| const TextWrapper = styled.View` | ||
| height: ${hp('70%')}; | ||
| width: ${wp('80%')}; | ||
| `; | ||
|
|
||
| const Login = styled.Text` | ||
| font-size: ${hp('5%')}; | ||
| `; | ||
|
|
||
| export default Login; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,29 @@ | ||
| This is an example repository that contains a sample setup of `react-native-responsive-screen` package. | ||
|
|
||
| This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). | ||
| # Usage | ||
| ```javascript | ||
| import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; | ||
|
|
||
| class Login extends Component { | ||
| render() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <View style={styles.textWrapper}> | ||
| <Text style={styles.myText}>Login</Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { flex: 1 }, | ||
| textWrapper: { | ||
| height: hp('70%'), // 70% of height device screen | ||
| width: wp('80%') // 80% of width device screen | ||
| }, | ||
| myText: { fontSize: hp('5%') // End result looks like the provided UI mockup } | ||
| }); | ||
|
|
||
| export default Login; | ||
| ``` |