04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to use element button in react native. You can easily use element button in react native. First i will create import namespace ElementButton from react-native-elements, after I will using element button using for element button tagadd in react native example.
Here, I will give you full example for simply display element button using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init ElementButton
Step 2 - Installation of Dependency
In the step, Run the following command for installation of dependency.
To use element button you need to npm install react-native-elements --save.
To install this open the terminal and jump into your project
cd ElementButton
Run the following command
npm install react-native-elements --save
In this step, You will open App.js file and put the code.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
export default function App() {
return (
<View style={styles.container}>
<Button
title="Save Item"
buttonStyle={{marginBottom:20,backgroundColor:'violet',width:120}}
/>
<Button
title="Delete Item"
type="outline"
buttonStyle={{marginBottom:20,width:120}}
/>
<Button
icon={
<Icon
name="facebook"
size={15}
color="white"
/>
}
title=" Icon Button"
buttonStyle={{width:120,backgroundColor:'coral'}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Step 4 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native