React Native Button Component
The following approach covers how to use the Button in react-native. For this, we are going to use the Button component. It is basically a clickable component that is used to perform some action when clicked by the user. Let's watch a demo video of what we are going to develop.
Demo Video:
Syntax
<Button
onPress={}
title="Button"
color="#841584"
/>
Props
Prop | Description |
|---|---|
onPress | It is called when the user taps on the button. |
title | It is the text that displays inside the button. |
accessibilityLabel | Text to display for blindness accessibility features. |
color | It is used to set the color of the button. |
disabled | If it is true, then the user wasn't able to press the button. |
hasTVPreferredFocus | TV preferred focus, which is only available for TV. |
nextFocusDown | Designates the next view to receive focus when the user navigates down. |
nextFocusForward | Designates the next view to receive focus when the user navigates forward. |
nextFocusLeft | Designates the next view to receive focus when the user navigates left. |
nextFocusRight | Designates the next view to receive focus when the user navigates right. |
nextFocusUp | Designates the next view to receive focus when the user navigates up. |
testID | It is used to locate this view in end-to-end tests. |
touchSoundDisabled | If true, it doesn't play system sound on touch. |
Now let’s start with the implementation.
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
Now let's implement the Button. Here we created a Button, and when someone clicks on that button, the count will change.
- Import libraries: Import required libraries at the top of the file.
// Import necessary modules from React and React Native
import React, { useState } from 'react';
// Import StyleSheet, Text, View, and Button components from React Native
import { StyleSheet, Text, View, Button } from 'react-native';
- StyleSheet: Create a StyleSheet to style components like container, text.
// Define styles for the components
const styles = StyleSheet.create({
// Style for the main container
container: {
flex: 1, // Take up the full height of the screen
backgroundColor: '#fff', // Set background color to white
alignItems: 'center', // Center items horizontally
justifyContent: 'center', // Center items vertically
},
// Style for the text displaying the count
text: {
fontSize: 40, // Set font size to 40
marginBottom: 30, // Add margin below the text
}
});
- Button: Create a button component and name it as "Click Me" to call a function that will increment the count value.
{/* Button to trigger the changeCount function when pressed */}
<Button
title={"Click Me"}
onPress={changeCount}
/>
- ChangeCount function: It is used to increment the count value by 1 and update the state i.e, count by calling setcount.
// Function to increment the count value by 1
const changeCount = () => {
setcount(count + 1);
};
- useState: It is used to declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it.
// Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
const [count, setcount] = useState(0);
- Text: It is used to represent the count coming from useState.
{/* Display the current count value */}
<Text style={styles.text}>{count}</Text>
- App Component: Wrap the Text and Button with a View and return that inside the App function to render and place the changeCount function and useState inside the App function, also make sure to export the App.
// Define the main App component as the default export
export default function App() {
// Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
const [count, setcount] = useState(0);
// Function to increment the count value by 1
const changeCount = () => {
setcount(count + 1);
};
// Render the UI
return (
<View style={styles.container}>
{/* Display the current count value */}
<Text style={styles.text}>{count}</Text>
{/* Button to trigger the changeCount function when pressed */}
<Button
title={"Click Me"}
onPress={changeCount}
/>
</View>
);
}
Complete Source Code:
App.js
// Import necessary modules from React and React Native
import React, { useState } from 'react';
// Import StyleSheet, Text, View, and Button components from React Native
import { StyleSheet, Text, View, Button } from 'react-native';
// Define the main App component as the default export
export default function App() {
// Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
const [count, setcount] = useState(0);
// Function to increment the count value by 1
const changeCount = () => {
setcount(count + 1);
};
// Render the UI
return (
<View style={styles.container}>
{/* Display the current count value */}
<Text style={styles.text}>{count}</Text>
{/* Button to trigger the changeCount function when pressed */}
<Button
title={"Click Me"}
onPress={changeCount}
/>
</View>
);
}
// Define styles for the components
const styles = StyleSheet.create({
// Style for the main container
container: {
flex: 1, // Take up the full height of the screen
backgroundColor: '#fff', // Set background color to white
alignItems: 'center', // Center items horizontally
justifyContent: 'center', // Center items vertically
},
// Style for the text displaying the count
text: {
fontSize: 40, // Set font size to 40
marginBottom: 30, // Add margin below the text
}
});
Output:
