npmpackage.info

react-native-responsive-screen

Make React Native views responsive for all devices with the use of 2 simple methods

1.4.2

1,566

MIT

JavaScript

7,586,872 1.9

Installations

npm install react-native-responsive-screen

Pull Requests

Open

48

Total

115

Closed

14

Merged

53

Issues

Open

21

Total

45

Closed

24

Releases

Version 1.1.0

v1.1.0

Published on 24 Apr 2018

View all 1 releases

Developer

marudy

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

14.15.1

NPM Version

6.14.8 Statistics

1,566 Stars

107 Commits

143 Forks

17 Watching

41 Branches

9 Contributors

Updated on 25 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

7,586,872

Last day

30.5%

18,914

Compared to previous day

Last week

29.1%

89,645

Compared to previous week

Last month

11.6%

309,687

Compared to previous month

Last year

69.1%

2,939,764

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react-native

Versions

Help with maintenance would be appreciated!

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

The package
Installation
Usage
Examples
How do I know it works for all devices ?
License
Pull Requests

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

Installation

npm install react-native-responsive-screen --save

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

Examples

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

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

Check the README of the related example repository

3. How to use with styled components

Check the README of the related example repository

How do I know it works for all devices ?

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.

Example:

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:

Smartphones

Tablets

License

MIT

Pull

Pull requests are welcome! Please make the PR to development branch though and not master. Thanks.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

100 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-5jpf-pj32-xx53
Warn: Project is vulnerable to: GHSA-prfq-f66g-43mp
Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m
Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-rvg8-pwq2-xj7q
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-h452-7996-h45h
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
Warn: Project is vulnerable to: GHSA-3w3w-pxmm-2w2j
Warn: Project is vulnerable to: GHSA-xwcq-pm8m-c4vf
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33
Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959
Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc / GHSA-pch5-whg9-qr2r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.9

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-native-responsive-screen

react-native-responsive-dimensions

3.1.1

Resposive fontSize, height and width for your react-native components.

react-native-popover-view

5.1.9

A <Popover /> component for react-native iOS, Android, and Web

react-native-responsive-fontsize

0.5.1

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

expo-splash-screen

0.29.13

Provides a module to allow keeping the native Splash Screen visible until you choose to hide it.

react-native-responsive-screen

Installations

Pull Requests

48

115

14

53

Issues

21

45

24

Releases

Developer

marudy

Developer Guide

CommonJS

No

14.15.1

6.14.8

Statistics

Languages

Total Downloads

7,586,872

Daily Downloads

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

Other packages similar to react-native-responsive-screen