Now, let's see tutorial of how to customize button of react native. if you want to see example of creating a custom button react native then you are a right place. We will look at example of building a custom button in react native. this example will help you create custom button in react native. You just need to some step to done how to make custom button in react native.

In this example,We will make to custom button in react native.you can pass props to buttontitle and onpress etc.below's this example

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the CustomeButton.js file and put the code.

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React from 'react'

const CustomeButton = (props) => {
    const {
        buttonTitle,
        onpress
    }=props;
  return (
    <View>
      <TouchableOpacity
        style={[styles.button]}
        onPress={onpress}
      >
        <Text style={{ color:'white'}}>{ buttonTitle }</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
    button:{
        height:50,
        width:325,
        borderRadius:25,
        alignItems:'center',
        paddingTop:14,
        marginTop:20,
        backgroundColor:'red'
    }
})

export default CustomeButton

In this step, You will open the App.js file and put the code.

import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, View,StatusBar,Alert  } from 'react-native';
import  CustomeButton  from './src/components/CustomeButton';


const App = () => {
  const submit = () => {
    Alert.alert('hii');
  }
  return (
      <View style={styles.container}>
        <Text style={{ fontSize: 30,fontWeight: 'bold', marginLeft: 50 }}>Custom Button</Text>
        <CustomeButton buttonTitle={'Submit'} onpress={submit}></CustomeButton>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'white',
    justifyContent:'center',
    alignContent: 'center',
    marginLeft: 15 
  },
  itemStyle: {
    padding: 10,
  },
});

export default App

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...