How to create a basic button in React Native ?
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.
In this article, we will see how to create a basic button in React-Native. To create a React-Native App we will use the Expo CLI version that will much smoother to run your React Native applications.
Approach: We will create 3 types of buttons here.
- Basic Button
- Custom Coloured Button
- Disabled Button
We will use <Button> tag
<Button title= "setTitle" ></Button>
Below is the step by step implementation of the above approach.
Step 1: Open your terminal and run the below command.
npm install -g expo-cli
Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.
expo init "projectName"
Step 3: Now go into the created folder and start the server by using the following command.
Project Structure: It will look like the following.
Step 4: Below is implementation of code. In App.js file, we simple create a button using <Button> tag. We will also set its color using color attribute.
Step to run application: To execute React-Native Program use the following command.
npm start web