react-native-responsive-screen

npmpackage.info

Gathering detailed insights and metrics for react-native-responsive-screen

Other packages similar to react-native-responsive-screen

react-native-responsive-fontsize

0.5.1

Simple method for resposive fontSize based on screen-size of the device in React-Native

react-native-responsive-mockup-screen

0.1.3

react-native-responsive-mockup-screen is a small library that provide 2 simple method so that react native developer can code their UI elements fully responsive as per their mockup design.No media query needed.

react-native-core-responsive-screen

1.1.5

react-native-core-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 de

smh-react-native-responsive-screen

0.1.6

smh-react-native-responsive-screen

Gathering detailed insights and metrics for react-native-responsive-screen

react-native-responsive-screen

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! ????

Usage

After the package has installed, when application loads (in real device and/or emulator), it detects the screen's width and height. I.e. for Samsung A5 2017 model it detects width: 360DP and height: 640DP (these are the values without taking into account the device's scale factor).

The package exposes 2 basic methods: 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.

Methods 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.

You can also provide decimal values to these 2 methods, i.e. font-size: widthPercentageToDP('3.75%').

The package methods can be used with or without flex depending on what you want to do and how you choose to implement it.

The suggested approach is to start developing from larger screens (i.e. tablets). That way you are less prone to forget adding responsive values for all properties of type 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.

There are 2 more methods to use if you want to support responsiveness along with orientation change. These are listenOrientationChange and removeOrientationListener. To see how to use them, check example number 3.

You can use this package along with styled-components. To see how to do that, check example number 2.

Updates ????

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).

1. How to use with StyleSheet.create() and without orientation change support

1import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; 2 3class Login extends Component { 4 render() { 5 return ( 6 <View style={styles.container}> 7 <View style={styles.textWrapper}> 8 <Text style={styles.myText}>Login</Text> 9 </View> 10 </View> 11 ); 12 } 13} 14 15const styles = StyleSheet.create({ 16 container: { flex: 1 }, 17 textWrapper: { 18 height: hp('70%'), // 70% of height device screen 19 width: wp('80%') // 80% of width device screen 20 }, 21 myText: { 22 fontSize: hp('5%') // End result looks like the provided UI mockup 23 } 24}); 25 26export default Login;

You can find a working example of this over the related example repository

Other packages similar to react-native-responsive-screen

Other packages similar to react-native-responsive-screen

Installations

Developer Guide

No

CommonJS

14.15.1

6.14.8

Score

Pull Requests

48

115

14

53

Issues

21

45

24

Releases

Languages

Developer

marudy

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Help with maintenance would be appreciated!

If interested please send me an email: tasos.maroudas@codedlines.com

Contents

react-native-responsive-screen

Installation

Usage

Updates ????

Examples

1. How to use with StyleSheet.create() and without orientation change support

2. How to use with StyleSheet.create() and with orientation change support

3. How to use with styled components

How do I know it works for all devices ?

Example:

Smartphones

Tablets

License

Pull

10

10

1

0

0

0

0

0

0

0

1.9

/10