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 are needed. It also provides an optional third method for screen orientation detection and automatic rerendering according to new dimensions. After the package has been installed, when the 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).

Features

  • You can use this package along with styled-components
  • There are 2 more methods to use if you want to support responsiveness along with orientation change
  • The suggested approach is to start developing from larger screens (i.e. tablets)
  • You can also provide decimal values to these 2 methods
  • Methods widthPercentageToDP and heightPercentageToDP can be used for any style (CSS) property that accepts DP as value
  • The package exposes 2 basic methods: widthPercentageToDP and heightPercentageToDP.

Project Samples

Project Activity

See All Activity >

Categories

Libraries

License

MIT License

Follow react-native-responsive-screen

react-native-responsive-screen Web Site

Other Useful Business Software
Earn up to 15% annual interest with Nexo. Icon
Earn up to 15% annual interest with Nexo.

Let your crypto work for you

Put idle assets to work with competitive interest rates, borrow without selling, and trade with precision. All in one platform. Geographic restrictions, eligibility, and terms apply.
Get started with Nexo.
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of react-native-responsive-screen!

Additional Project Details

Operating Systems

Apple iPhone

Programming Language

JavaScript

Related Categories

JavaScript Libraries

Registered

2023-06-21