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.
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 <Button> tag
Syntax:
<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.
cd "projectName"
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.
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; |
Step to run application: To execute React-Native Program use the following command.
npm start web
Output:
