How to create a basic button in React Native ?
In this article, we will learn how to create a basic button in React Native. To build a React Native app, we will use the Expo CLI, which provides a smoother experience for running your applications.
Expo
It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.
Approach
We will create 3 types of buttons here.
- Basic Button
- Custom Coloured Button
- Disabled Button
We will use the <Button> tag. Let's watch a demo video of what we are going to develop.
Demo Video
Syntax
<Button title= "setTitle" ></Button>Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app.
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Below is the implementation of the code. In the App.js file, we simply create a button using the <Button> tag. We will also set its color using a color attribute.
- Import libraries: Import required libraries at the top of the file.
import React from "react"; // Import React library
import {
StyleSheet, // Import StyleSheet for styling components
Button, // Import Button component from React Native
Text, // Import Text component for displaying text
Alert, // Import Alert for showing alerts
View // Import View component for layout
} from "react-native";
- StyleSheet: Create a StyleSheet to style components like the header and setMargin.
// Define styles for the components
const styles = StyleSheet.create({
header: {
fontSize: 20, // Set font size for the header text
fontWeight: "bold" // Make the header text bold
},
setMargin: {
marginTop: 50, // Add top margin to the container
marginHorizontal: 20 // Add horizontal margin to the container
}
})
- Buttons: This Button component is used to call an alert function when the user taps on it.
// 1.Basic Button
<Button
title="Press me" // Set the button title
onPress={() => Alert.alert('Simple Button pressed')} // Show an alert when the button is pressed
/>
// 2.Custom Coloured Button
<Button
title="Press me" // Set the button title
color="#f194ff" // Set the button color
onPress={() => Alert.alert('Coloured Button pressed')} // Show an alert when the button is pressed
/>
// 3.Disabled Button
<Button
title="Press me" // Set the button title
disabled // Disable the button
onPress={() => Alert.alert('Cannot press this one')} // Show an alert (won't trigger since the button is disabled)
/>
- Text: This is used to display text data in the app.
{/* Display header text for the simple button */}
<Text style={styles.header}>Simple Button</Text>
{/* Display header text for the coloured button */}
<Text style={styles.header}>Coloured Button</Text>
{/* Display header text for the disabled button */}
<Text style={styles.header}>Disabled Button</Text>
- alert function: This function is used to display an alert dialog box which contains a Title and message with two buttons.
Alert.alert('Simple Button pressed')
- App Component: Wrap the Buttons and Texts with a View and return that inside the App function to render, also make sure to export the App.
// Define the main App component
export default function App() {
return (
<View style={styles.setMargin}> {/* Apply margin style to the container */}
<Text style={styles.header}>Simple Button</Text> {/* Display header text for the simple button */}
<Button
title="Press me" // Set the button title
onPress={() => Alert.alert('Simple Button pressed')} // Show an alert when the button is pressed
/>
<Text style={styles.header}>Coloured Button</Text> {/* Display header text for the coloured button */}
<Button
title="Press me" // Set the button title
color="#f194ff" // Set the button color
onPress={() => Alert.alert('Coloured Button pressed')} // Show an alert when the button is pressed
/>
<Text style={styles.header}>Disabled Button</Text> {/* Display header text for the disabled button */}
<Button
title="Press me" // Set the button title
disabled // Disable the button
onPress={() => Alert.alert('Cannot press this one')} // Show an alert (won't trigger since the button is disabled)
/>
</View>
)
}
Complete Source Code
App.js:
import React from "react";
import {StyleSheet, Button,Text, Alert ,View} from "react-native";
function App() {
return (
<View style={styles.setMargin}>
<Text style={styles.header}>Simple Button</Text>
<Button
title="Press me"
onPress={() => Alert.alert('Simple Button pressed')}
/>
<Text style={styles.header}>Coloured Button</Text>
<Button
title="Press me"
color="#f194ff"
onPress={() => Alert.alert('Coloured Button pressed')}
/>
<Text style={styles.header}>Disabled Button</Text>
<Button
title="Press me"
disabled
onPress={() => Alert.alert('Cannot press this one')}
/>
</View>
)
}
const styles=StyleSheet.create({
header:{
fontSize: 20,
fontWeight: "bold"
},
setMargin:{
marginTop:50
}
})
export default App;
Output:
