How to Create Custom Components in React Native?

Custom components in React Native are the blocks that can be reused, with associated behavior, for specific UI elements. The use of custom components provides a way of maintaining and reusing code while also providing more predictable structure to your project.

Benefits of Using Custom Components

• Reusable – Write it once, use it throughout the entire application. 
• Maintainable – Changes, updates, and debugging can be easier to trace when you are using isolated components.
• Readable – Adds a layer of structure that enhances a user’s understanding of the codebase.
• Faster Development – You develop the custom component once, and then you can just implement it where necessary.

Example to Create Custom Components in React Native:

Step 1: Custom Button Component

/components/CustomButton.js

import AppStyles from '../config/styles';
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = ({ title, onPress = () => { } }) => {
    return (
        <TouchableOpacity
            onPress={onPress}
            activeOpacity={0.7}
            style={styles.buttonView}>
            <Text style={styles.text}>{title}</Text>
        </TouchableOpacity>
)};

const styles = StyleSheet.create({
    buttonView: {
        height: 55,
        width: '100%',
        backgroundColor: 'black',
        marginVertical: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5
    },
    text: {
        fontWeight: 'bold',
        fontSize: 18,
        color: 'white'
    }
})

export default CustomButton;

Step 2: Use it in your App

import React from 'react';
import { StyleSheet, View } from 'react-native';
import CustomButton from './components/CustomButton';

const APP = () => {
    const validate = () => {
        console.log("welcome To React Native")
    }
    return (
        <View style={styles.main}>
        <CustomButton
            title="Submit"
            onPress={validate}
        />
        <CustomButton
            title="Close"
            onPress={validate}
        />
    </View>
)};

const styles = StyleSheet.create({
    main: {
        padding: 10,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

export default APP;

Output:

Conclusion:

Custom components are the basis for a well-structured React Native application. Custom components assist developers in writing clean, reusable, and scalable code. The more complexity derived from a project, either mobile or otherwise, the more time-efficient the custom components will make you as a developer.