How to make full responsive our React Native applications?

Why we should to use responsive methods in our apps?

Whether you have started React Native recently or you are a senior React Native developer, responsiveness is always a serious and required problem in mobile app development. Like web development, the subject is so important and inevitable in mobile apps. Although React Native uses density independent pixels (known as briefly dp), it hasn’t the same behave on different devices.

What we can do to make our applications responsive (layouts, fonts etc) and have easy development? In the following I’ll show you how you are able to have the both of those together.

How to implement it?
There are different packages to help us make our apps responsive, today I’m going to show you that with react-native-full-responsive.

Installation
First install the package by package manager that you like:

npm install react-native-full-responsive --save
//or
yarn add react-native-full-responsive

After installing it, depending on whatever you like that you capable of to import methods to your component:

//the first way
import {
  responsiveScale,
  responsiveWidth,
  responsiveHeight,
  useResponsiveDim,
  useResponsiveScale,
  useResponsiveWidth,
  useResponsiveHeight,
} from 'react-native-full-responsive';
//or briefly
import {
  rs,
  rw,
  rh,
  useRD,
  useRS,
  useRW,
  useRH,
} from 'react-native-full-responsive';

responsiveScale
Will scale the passed size (depending on what is user device dimensions) and return scaled value, it get three arguments but just first argument is required and second and third arguments just when required that you want to add event listener for dimensions and pass the new dimensions (example portrait to landscape or vice versa) but if you use functional programming you are be able to use useResponsiveScale hook and there aren’t more steps and just pass the size you want scale that.

const fontSize = responsiveScale(SIZE, SCREEN_WIDTH, SCREEN_HEIGHT); //or rs(SIZE, SCREEN_WIDTH, SCREEN_HEIGHT);
//hooks
const fontSize = useResponsiveScale(SIZE); //or useRS(SIZE);

responsiveWidth and responsiveHeight
Usage of these like responsiveScale but those just get two arguments that first required and second argument for responsiveWidth is custom screen width and for responsiveHeight is custom screen height, like I explained above you can use that.

const responsiveWidth = responsiveWidth(SIZE, SCREEN_WIDTH); //or rw(SIZE, SCREEN_WIDTH);
const responsiveHeight = responsiveHeight(SIZE, SCREEN_HEIGHT); //or rh(SIZE, SCREEN_HEIGHT);
//hooks
const responsiveWidth = useResponsiveWidth(SIZE); //or useRW(SIZE);
const responsiveHeight = useResponsiveHeight(SIZE); //or useRH(SIZE);

Also there is useResponsiveDim hook when you need to have both useResponsiveWidth and useResponsiveHeight together:

const responsiveHeight = useResponsiveDim(WIDTH, HEIGHT); //or useRD(WIDTH, HEIGHT);

useResponsiveMethods

Sometimes you want to use a responsive scale, responsive width or height inside your component more than once and you want both sizes for portrait and landscape mode, so this hook will be the solution and it will return to you rs, rw and rh methods:

import { useResponsiveMethods } from 'react-native-full-responsive'; //or useRM
//…
const {rs, rw, rh} = useResponsiveMethods();

An example:

import * as React from 'react';

import { StyleSheet, View, Text } from 'react-native';
import { rh, rs, useRS } from 'react-native-full-responsive';

const SIZE = 20;

export default function App() {
 const fontSize = useRS(SIZE);

 return (
   <View style={styles.container}>
     <View style={styles.box}>
       <Text style={[styles.textBold, { fontSize: SIZE }]}>
         without react-native-full-responsive
       </Text>
     </View>
     <View style={styles.responsiveBox}>
       <Text style={[styles.textBold, { fontSize }]}>
         with react-native-full-responsive
       </Text>
     </View>
   </View>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
 box: {
   height: SIZE * 3,
   marginVertical: SIZE,
   justifyContent: 'center',
   backgroundColor: 'orange',
 },
 responsiveBox: {
   height: rh(SIZE),
   justifyContent: 'center',
   marginVertical: rs(SIZE),
   backgroundColor: 'yellow',
 },
 textBold: {
   fontWeight: 'bold',
 },
});

At the end recommended to use responsiveScale (rs) for creating responsive font, padding and margin also for width use at responsiveWidth (rw) also for height, use at responsiveHeight (rh).

Good Luck!