From 9ea04ef88689a8755bef1eaf3d532ebd8e21bb82 Mon Sep 17 00:00:00 2001 From: Tasos Maroudas Date: Sun, 6 May 2018 13:22:39 +0300 Subject: [PATCH] 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 --- README.md | 139 +++--------------- .../README.md | 46 +++++- .../README.md | 34 ++++- examples/responsive-screen/README.md | 28 +++- 4 files changed, 125 insertions(+), 122 deletions(-) diff --git a/README.md b/README.md index 824fcd9..3115e66 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,16 @@ -# react-native-responsive-screen +# Contents +* [The package](#react-native-responsive-screen) +* [Inspiration](#inspiration) +* [Installation](#installation) +* [Usage](#usage) +* [How do I know it works for all devices ?](#example) +* [License](#license) -react-native-responsive-screen is a small library that provides 2 simple methods so that React Native developers can code their elements with responsive independent pixel (dp) values. No media queries needed. +# react-native-responsive-screen -UPDATE: From version 1.1 onwards, it provides an optional third method for screen orienation detection and automatic rerendering according to new dimensions. +react-native-responsive-screen is a small library that provides 2 simple methods so that React Native developers can code their UI elements fully responsive. No media queries needed. -It can be easily combined with other CSS libraries for React Native, i.e. [styled components](https://www.styled-components.com/) and [Expo framework](https://expo.io/) as well. Check out the [Usage](#usage) section below for more details. +It also provides an optional third method for screen orienation detection and automatic rerendering according to new dimensions. Give it a try and make your life simpler! @@ -12,9 +18,9 @@ Give it a try and make your life simpler! # Inspiration -As web developers we are familiar with CSS percentage values. Unfortunately, percentages are not fully supported in React Native, at least not yet. There are CSS properties that do not support percentage values at all, although they do in “normal” web development (i.e. `margin`, `border-width`, `border-radius` etc). +As web developers we are familiar with CSS percentage values. Unfortunately, percentages are not fully supported in React Native, at least not yet. I.E. `margin`, `border-width`, `border-radius` properties do not support percentage values at all. -This package provides a way to use percentages - the developer provides percentage strings as arguments and the methods calculate the “correct” independent pixel (dp) values for every different screen dynamically. +This package provides a way to use percentages; the developer provides percentage stings as arguments and the methods calculate the “correct” independent pixel (dp) values for every different screen dynamically. # Installation @@ -24,17 +30,9 @@ This package provides a way to use percentages - the developer provides percenta ## 1. How to use with StyleSheet.create() and without orientation change support ```javascript -import React, {Component} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; -import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen'; +import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; class Login extends Component { - constructor(props) { - super(props); - - this.state = {}; - } - render() { return ( @@ -47,120 +45,23 @@ class Login extends Component { } const styles = StyleSheet.create({ - container: { - flex: 1 - }, + container: { flex: 1 }, textWrapper: { - height: heightPercentageToDP('70%'), // 70% of height device screen - width: widthPercentageToDP('80%') // 80% of width device screen + height: hp('70%'), // 70% of height device screen + width: wp('80%') // 80% of width device screen }, - myText: { - fontSize: heightPercentageToDP('5%') // End result looks like the provided UI mockup - } + myText: { fontSize: hp('5%') // End result looks like the provided UI mockup } }); export default Login; ``` ## 2. How to use with StyleSheet.create() and with orientation change support -In odrer to detect orientation change, there are 2 major differences from the previous 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). - -When using this, make sure to monitor UI performance of your app in a real device on orienation change. Since the styles are calculated every time from scratch inside the render function, make sure it's nor affecting your performance, especially on complicated screens with many UI elements. - -```javascript -import React, {Component} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; -import { - widthPercentageToDP, - heightPercentageToDP, - listenOrientationChange, - removeOrientationListener -} from 'react-native-responsive-screen'; - -class Login extends Component { - constructor(props) { - super(props); - - this.state = {}; - - listenOrientationChange(this); - } - - componentWillUnMount() { - removeOrientationListener(); - } - - render() { - const styles = StyleSheet.create({ - container: { - flex: 1 - }, - textWrapper: { - height: heightPercentageToDP('70%'), // 70% of height device screen - width: widthPercentageToDP('80%') // 80% of width device screen - }, - myText: { - fontSize: heightPercentageToDP('5%') // End result looks like the provided UI mockup - } - }); - - return ( - - - Login - - - ); - } -} +Check the README of the [related example repository](https://github.com/marudy/react-native-responsive-screen/tree/development/examples/responsive-screen-orientation-change) -export default Login; -``` ## 3. How to use with styled components -Same logic applies as above in case you want to use the package with or without orientation change support. Below se show a sample setup with styled compoments and without orientation change support. - -```javascript -import React, {Component} from 'react'; -import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen'; -import styled from 'styled-components'; - -class Login extends Component { - constructor(props) { - super(props); - - this.state = {}; - } - - render() { - return ( - - - Login - - - ); - } -} - -const Container = styled.View` - flex: 1; -`; - -const TextWrapper = styled.View` - height: ${heightPercentageToDP('70%')}; // 70% of height device screen - width: ${widthPercentageToDP('80%')}; // 80% of width device screen -`; - -const Login = styled.Text` - font-size: ${heightPercentageToDP('5%')}; // End result looks like the provided UI mockup -`; - -export default Login; -``` - +Check the README of the [related example repository](https://github.com/marudy/react-native-responsive-screen/tree/development/examples/responsive-screen-styled-components) # How do I know it works for all devices ? @@ -178,6 +79,6 @@ The 4 blue tiles at the bottom half of the screen should take over 98% of the sc ### Tablets -# Licence +# License MIT diff --git a/examples/responsive-screen-orientation-change/README.md b/examples/responsive-screen-orientation-change/README.md index 745714d..1d22ee4 100644 --- a/examples/responsive-screen-orientation-change/README.md +++ b/examples/responsive-screen-orientation-change/README.md @@ -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 ( + + + Login + + + ); + } +} + +export default Login; +``` diff --git a/examples/responsive-screen-styled-components/README.md b/examples/responsive-screen-styled-components/README.md index 13163db..274814b 100644 --- a/examples/responsive-screen-styled-components/README.md +++ b/examples/responsive-screen-styled-components/README.md @@ -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). \ No newline at end of file +# 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 ( + + + Login + + + ); + } +} + +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; +``` diff --git a/examples/responsive-screen/README.md b/examples/responsive-screen/README.md index bf74306..b7a9412 100644 --- a/examples/responsive-screen/README.md +++ b/examples/responsive-screen/README.md @@ -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). \ No newline at end of file +# Usage +```javascript +import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; + +class Login extends Component { + render() { + return ( + + + Login + + + ); + } +} + +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; +```