Responsive UI in React Native

Issue

How to create responsive UI or design in React Native like View (Horizontal and Portrait mode), Fonts size etc...

And not change any design or UI in any devices it is same in all devices.

I refer many material but i am not satisfied that.

Solution

For responsive UI you can use react-native-responsive-screen and have the style designed considering the percentage of width and height

For responsive fontsize you can use react-native-responsive-fontsize and have a separate component as fonts.js and use it throughout the app.

fonts.js Component can be as below

import { Platform } from "react-native";
import { RFPercentage } from "react-native-responsive-fontsize";

export default fonts={
fontSmall: Platform.OS==='android'?  RFPercentage(1.8): RFPercentage(1.5),
fontMedium:  RFPercentage(1.8),
fontEntry:RFPercentage(2.0),
fontHeader:RFPercentage(2.1),
fontTV:RFPercentage(2.2),
fontNormal:RFPercentage(2.5),
fontLargeExtra:RFPercentage(2.7),
fontLarge:RFPercentage(3.0),
fontXLarge:RFPercentage(3.5),
fontXXLarge:RFPercentage(4.0),
fontXXLarge:RFPercentage(4.5),
};

The fonts component and the resposive UI in your components can be used as below:

import fonts from './fonts';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
viewStyle: {
width: wp('20%'),
marginTop: hp(‘4%’),
height: hp('4.5%'),
fontSize: fonts.fontSmall,
},

});

Answered By - Ruchi Tiwari