04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to create button in react native. You can easily build button in react native. First i will import namespace Button
Here, I will give you full example for simply display button using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init BasicButton
Step 2 - App.js
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonDemo extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1" color="#ff69b4" />
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2" color="#87ceeb" />
</View>
<View style={styles.buttonContainer}>
<Button title="Button 3" color="#db7093" />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
}
});
Step 3 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native