Responsive UI in React Native

Question

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.

Answer 1

To make UI Responsive in real native, you can use Dimensionion where you get the height and width and multiply the numeric value with the width to make the design responsive.

Example :

import {
    Image,
    ImageBackground,
    SafeAreaView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    KeyboardAvoidingView,
    ScrollView,
    Platform,
    Dimensions
} from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const { width, height } = Dimensions.get('window');

const BoardingUnfill = ({ navigation }) => {
  const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
 return (
        <SafeAreaView style={styles.container}>
            <ImageBackground
                source={require('../assets/Image/BackGround.png')}
                style={styles.backgroundImage}
            >
                <KeyboardAvoidingView
                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                    style={styles.keyboardAvoidingView}
                >
                    <ScrollView
                        contentContainerStyle={styles.scrollViewContent}
                        ref={scrollViewRef}
                    >
                        <Text style={styles.title}>Let The Magic Begin!</Text>
                        <Image
                            source={require('../assets/Image/Group5.png')}
                            style={styles.image}
                        />
                        <View style={styles.inputContainer}>
                            <View style={styles.inputWrapper}>
                                <Text style={styles.inputLabel}>First Name</Text>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder="Enter Your First Name"
                                    placeholderTextColor={'#AAAAAA'}
                                    value={firstName}
                                    onChangeText={setFirstName}
                                />
                            </View>
                            <View style={styles.inputWrapper}>
                                <Text style={styles.inputLabel}>Last Name</Text>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder="Enter Your Last Name"
                                    placeholderTextColor={'#AAAAAA'}
                                    value={lastName}
                                    onChangeText={setLastName}
                                />
                            </View>
                            <View style={styles.inputWrapper}>
                                <Text style={styles.inputLabel}>Email</Text>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder="Enter Your Email (Optional)"
                                    placeholderTextColor={'#AAAAAA'}
                                    value={email}
                                    onChangeText={setEmail}
                                />
                            </View>
                        </View>

                        <TouchableOpacity
                            style={styles.continueButton}>
                            <Text style={styles.continueButtonText}>Continue</Text>
                        </TouchableOpacity>
                    </ScrollView>
                </KeyboardAvoidingView>
            </ImageBackground>
        </SafeAreaView>
    );
};


export default BoardingUnfill;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        flex: 1,
        paddingHorizontal: width * 0.05,
    },
    keyboardAvoidingView: {
        flex: 1,
    },
    scrollViewContent: {
        flexGrow: 1,
        justifyContent: 'center',
        paddingBottom: 20,
    },
    title: {
        fontSize: width * 0.065,
        fontWeight: 'bold',
        color: '#FFFFFF',
        textAlign: 'center',
        marginTop: height * 0.05,
    },
    image: {
        alignSelf: 'center',
        marginTop: height * 0.05,
        width: width * 0.5,
        height: height * 0.25,
        resizeMode: 'contain',
    },
    inputContainer: {
        marginTop: height * 0.02,
    },
    inputWrapper: {
        marginTop: height * 0.02,
    },
    inputLabel: {
        fontSize: width * 0.04,
        fontWeight: '600',
        color: '#FFFFFF',
    },
    textInput: {
        fontSize: width * 0.04,
        fontWeight: '600',
        color: '#010101',
        height: height * 0.07,
        width: '100%',
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
        marginTop: height * 0.01,
        paddingHorizontal: width * 0.02,
    },
    continueButton: {
        height: height * 0.07,
        width: '100%',
        backgroundColor: '#3E6227',
        borderRadius: 16,
        marginTop: height * 0.04,
        justifyContent: 'center',
        alignItems: 'center',
    },
    continueButtonText: {
        fontSize: width * 0.04,
        fontWeight: '800',
        color: '#FFFFFF',
    },
});

Answer 2

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,
},

});