gem-hunter
Language: JavaScript
Make React Native views responsive for all devices with the use of 2 simple methods
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 also provides an optional third method for screen orientation detection and automatic rerendering according to new dimensions.
Give it a try and make your life simpler!
Check out this medium article to see the power of the library! 🚀
npm install react-native-responsive-screen --save
width: 360DP and height: 640DP (these are the values without taking into account the device's scale factor).widthPercentageToDP and heightPercentageToDP. Their names essentially mean that you can supply a "percentage like" string value to each method and it will return the DP (indipendent pixel) that correspond to the supplied percentage of current screen's width/height respectivelly. I.e. for Samsung A5 2017, if we supply to a CSS box: width: widthPercentageToDP('53%'), the rendered style will be width: 190.8 DP. Check example number 1 for how to use them.widthPercentageToDP and heightPercentageToDP can be used for any style (CSS) property that accepts DP as value. DP values are the ones of type number over the props mentioned in RN docs: View style props, Text style props, Image style props, Layout props and Shadow props. Use the exposed methods for all of the type number properties used in your app in order to make your app fully responsive for all screen sizes.font-size: widthPercentageToDP('3.75%').number. In any case, when your screen development is done, you should test it over a big range of different screens as shown below in the How do I know it works for all devices ? section.listenOrientationChange and removeOrientationListener. To see how to use them, check example number 3.styled-components. To see how to do that, check example number 2.v1.4.0 onwards: The library now has flowtype support. Types should work out of the box, no additional setup needed.widthPercentageToDP and heightPercentageToDP methods accept numeric values as well from version 1.2.1 onwards. That being said a width of 53% can now be written both width: widthPercentageToDP('53%') and width: widthPercentageToDP(53).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;
You can find a working example of this over the related example repository
Check the README of the related example repository
Check the README of the related example repository
As mentioned in "How to Develop Responsive UIs with React Native" article, this solution is already in production apps and is tested with a set of Android, iOS emulators of different screen specs, in order to verify that we always have the same end result.
The 4 blue tiles at the bottom half of the screen should take over 98% of the screen’s width in dp and 10% of the screen’s height in dp always:
MIT
Pull requests are welcome! Please make the PR to development branch though and not master. Thanks.