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

Screen Size	Break Point	Label
Small	⩽ 640px	sm
Medium	> 640px and ⩽ 1007px	md
Large	> 1007px	lg

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.

Prop Command	Scope
$sm	small devices in both portrait and landscape modes
$sm-ptr	small devices in portrait modes only
$sm-lnd	small devices in landscape modes only
$md	medium devices in both portrait and landscape modes
$md-ptr	medium devices in portrait modes only
$md-lnd	medium devices in landscape modes only
$lg	large devices in both portrait and landscape modes
$lg-ptr	large devices in portrait modes only
$lg-lnd	large devices in landscape modes only
$ptr	any device in portrait mode
$lnd	any device in landscape mode

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

Prop	Description
visible$<prop-command>	Displays the component only if the prop command matches for the device and mode
hidden$<prop-command>	Hides the component only if the prop command matches for the device and mode
render$<prop-command>	A callback which returns a component to be rendered when the prop command matches

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.

Function	Description
isLandscapeMode	A function that returns true if devices is in landscape mode and false otherwise.
isPortraitMode	A function that returns true if device is in portrait mode and false otherwise.
isSmallScreen	returns true if is a small device (i.e ⩽ 640px) and false otherwise
isMediumScreen	returns true if is a medium device (i.e > 640px and ⩽ 1007px) and false otherwise
isLargeScreen	returns true if is a large device (i.e > 1007px ) and false otherwise
getDeviceLabel	returns the device label i.e. "sm" for small devices, "md" for medium devices and "lg" for large devices
getDeviceSpecificLabel	returns the device label coupled with the current mode of the device i.e. "sm-ptr" for small devices in portrait mode, "sm-lnd" for small devices in landscape mode, "md-ptr" for medium devices in portrait mode, "md-lnd" for medium devices in landscape mode, "lg-ptr" for large devices in portrait mode and "lg-lnd" for large devices in landscape mode,
getDeviceMode	returns the device's current mode, i.e "lnd" if device is in landscape mode or "ptr" if device is in portrait mode
registerOrientationChangedListener	this function accepts a callback as an argument which is invoked every time the orientation of the device is changed. The callback takes as arguments a javascript object of the form {"width":Number, "height":Number, "orientation":"LANDSCAPE"|"PORTRAIT"}
removeAllListeners	Removes all orientation change listeners that have been registered.
removeListener	Removes a particular orientation change listener. It takes as argument the listener that is to be removed.

Contributing

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