React Native Button Component

The Button component in React Native is a simple and built-in UI element used to trigger actions when users tap it, making it essential for handling user interactions in mobile applications.

• Supports basic actions through the onPress event handler.
• Allows customization using props like title, color, and disabled.
• Provides accessibility and testing support with accessibilityLabel and testID.

• Displays a simple Button with the text "Click Me" inside a View container.
• Shows an alert message saying "Button Pressed" when the button is tapped.

Syntax:

<Button
 onPress={function...}
 title="buttonText"
 color="buttonColor"
/>

Props for Button Component

These Button props in React Native provide control over appearance, behavior, accessibility, navigation, and testing of the Button component.

1. Interaction & Behavior

Controls how the button responds to user actions.

• onPress: Executes a function when the button is tapped.
• disabled: Prevents the button from being pressed.
• touchSoundDisabled: Disables the system sound when the button is tapped.

2. Display & Content

Defines the visual text and color of the button.

• title: Displays the text inside the button.
• color: Sets the color of the button.

3. Accessibility

Improves usability for screen readers and assistive devices.

• accessibilityLabel: Provides a readable label for screen readers.
• hasTVPreferredFocus: Gives the button priority focus on TV devices.

4. Focus & Navigation

Improves usability for screen readers and assistive devices.

• nextFocusUp: Specifies the next focusable view when navigating up.
• nextFocusDown: Specifies the next focusable view when navigating down.
• nextFocusLeft: Specifies the next focusable view when navigating left.
• nextFocusRight: Specifies the next focusable view when navigating right.
• nextFocusForward: Specifies the next focusable view when navigating forward.

5. Testing

Helps identify the button during automated testing.

• testID: Identifies the button for automated testing.

Implementing Button Component

It involves using the React Native Button component to create interactive buttons that trigger actions and handle user input within an application.

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

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

• Android Emulator: Press a in the terminal to open the app in the Android emulator.
• Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
• iOS Device: Open the Camera app and scan the QR code to launch the app.
• Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

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.

StyleSheet: Create a StyleSheet to style components like container, text.

Button: Create a button component and name it as "Click Me" to call a function that will increment the count value.

ChangeCount function: It is used to increment the count value by 1 and update the state i.e, count by calling setcount.

useState: It is used to declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it.

Text: It is used to represent the count coming from useState.

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.

Complete Source Code: App.js

It brings together all the previously discussed parts into a single, complete App.js file that runs the application.

Output: