Creating a basic button in React Native

Creating a basic button in React Native allows users to perform actions when pressed, such as submitting data or showing alerts. React Native provides a built-in Button component for handling user interactions easily.

• he Button component is used to create clickable buttons in React Native.
• It uses the title prop to display text on the button.
• The onPress prop is used to define the function that runs when the button is pressed.

Expo

Expo is a framework and platform used to build React Native applications easily. It provides tools and services to develop, run, and deploy apps for Android, iOS, and web using the same codebase.

• It provides the Expo CLI to quickly create and run React Native projects.
• It allows developers to build apps without writing native code (Java/Kotlin or Swift).
• It supports fast development, testing, and deployment using tools like Expo Go.

Approach

We will create 3 types of buttons here.

• Basic Button
• Custom Coloured Button
• Disabled Button

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

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. 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.

2. For iOS users, simply scan the QR code using the Camera app.

3. 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.

- StyleSheet: Create a StyleSheet to style components like the header and setMargin.

- Buttons: This Button component is used to call an alert function when the user taps on it.

- Text: This is used to display text data in the app.

- alert function: This function is used to display an alert dialog box which contains a Title and message with two buttons.

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

Complete Source Code

App.js:

Output: