React Native Button With Icon and Text Example

Jan 30, 2023 . Admin

This tutorial is focused on react native button example. I would like to share with you react native button with icon and text example. This article will give you simple example of react native icon example. you can understand a concept of react native button with icon and text. Let's get started with how to create and style custom buttons in react native.

In this example, We will create to button with icon and text in react native.you can easy and simply create to button in react native.you can use react native style.below this example.

Step 1: Download Project

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

expo init ExampleApp
Step 2: Download Library

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

npm i react-native-vector-icons
Step 3: App.js

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

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default function App() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ 
            backgroundColor:'red',
            borderWidth:1,
            padding:10,
            borderColor:'red'
          }}
        >
        <Text style={{ color:'white', fontSize:17,fontWeight: '400' }}><FontAwesome name='trash-o' size={20} color='white'/> Delete</Text>
        </TouchableOpacity>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems:'center'
  },
});
Step 4: Run Project

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...

#React Native