react-native-responsive-component

This react native library provides a way of efficiently and dynamically rendering components based on a device's screen size and/or orientation irrespective of the platform. It achieves this by providing a new declarative syntax for applying different values of the same props to different devices based on their current orientation and/or screen size.

Installation

Yarn: yarn add react-native-responsive-component

Npm: npm install react-native-responsive-component --save

Demo

Basic Usage - Example 1

Usage

Example

import { View } from "react-native";
import RComponent from "react-native-responsive-component";

<RComponent
  render$={() => View}
  style$sm={{ flexDirection: "row", backgroundColor: "red" }}
  style$md-lnd={{ flexDirection: "column", justifyContent: "center" }}
  style$lg-ptr={{ flex: 1, backgroundColor: "blue" }}
/>

The RComponent above will render the View component with it's style prop set to {flexDirection:"row", backgroundColor:"red"} on small devices ($sm), {flexDirection:"column", justifyContent:"center"} on medium devices ($md-lnd) with the landscape orientation and {flex:1, backgroundColor:"blue"} on large devices with the portrait orientation ($lg-ptr).

There are currently 3 break points for various screen sizes as shown by the table

Prop Commands

The prop command is what is used by RComponent to determine what prop to apply to the rendered component based on the device. A prop command always begins with a dollar ($) symbol after the prop name. Here are all the available prop commands that could be used.

Multiple prop commands could be chained to extend it's scope. For example $sm$md-lnd will match for small devices in both portrait and landscape mode and medium devices in landscape mode only. e.g

<RComponent
  render$={() => Text}
  style$md-ptr$sm-lnd={{ fontSize: 20 }}
  style$lg-lnd$md$sm={{ fontSize: 25 }}
  style={{ fontSize: 35 }}
/>

The above example will apply the style prop with {fontSize:20} for medium devices in portrait mode ($md-ptr) and small devices in landscape mode ($sm-lnd). It will equally apply the style prop with {fontSize:25} for large devices in landscape mode($lg-lnd), medium devices in both portrait and landscape modes ($md) and small devices in both portrait and landscape modes ($sm). For any other case, the style prop with {fontSize:35} will be applied.

Please note that if two prop commands conflict for the same prop, the prop command that is most specific to the device is applied. for example;

<RComponent
  render$={() => View}
  style$md={{ flex: 1 }}
  style$md-ptr={{ flex: 2 }}
/>

In the case above, there's a conflict between the two style prop when on a medium device in portrait mode because the $md and $md-ptr prop commands both matches for this mode. In such a scenario, only the style prop with {flex:2} will be applied because it's prop command ($md-ptr) is more specific to the device and its current mode. One last thing to note is that if a prop command is not specified, it always matches (although with the least precedence in case of conflict).

Other Properties

More Use cases

Owing to the frequent use of the View, Text and Image components, react-native-responsive-components also provides precompiled RView, RText and RImage components so that the render$ method could be ommited while using them. for example:

import {RView, RText} from "react-native-responsive-component";

<RView
   style$ptr = {{flexDirection:"row"}}
   style$lnd = {{flexDirection:"column"}}>
   (...)
</RView>   

There are equally helper/utility functions provided by the RUtil object of the library.

import {RUtils} from "react-native-responsive-component";

(...)
if(RUtils.isLandscapeMode()){
  //do something when in landscape mode
}
else if (RUtils.isSmallScreen()){
  //do something for small devices.
}  

The table below shows a list of available functions.

Contributing

If you love this library, consider contributing to make it better. Thanks