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, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.
In this article, we will be learning how to add Floating Buttons in React Native.
Creating React Native App:
Step 1: We’ll be using the expo to create the react native app. Install expo-cli using the below command in the terminal.
npm install -g expo-cli
Step 2: Create a react native project using expo.
expo init "gfg"
Step 3: Now go to the created project using the below command.
cd "gfg"
Project Structure: It will look like the following.
Creating Floating Button: We can easily add floating buttons in our react native app. For this, we are going to use the TouchableOpacity component of react-native.Â
Example: Add the below code in the App.js file.
Javascript
import React, { useState } from "react"; import { View, Text, TouchableOpacity } from "react-native";     const GfGApp = () => {       return (         <View style={{ marginTop: 200 }}>             <Text style={{ fontSize: 18 }}>                 neveropen React Native Floating Button             </Text>                           <TouchableOpacity                 style={{                     borderWidth: 1,                     borderColor: 'red',                     alignItems: 'center',                     justifyContent: 'center',                     width: 70,                     position: 'absolute',                     top: 390,                     right: 20,                     height: 70,                     backgroundColor: 'red',                     borderRadius: 100,                 }}                 onPress={() => { alert('Button is pressed') }}             >                 <Text style={{ color: "white" }}>Floating</Text>             </TouchableOpacity>         </View>     ); };   export default GfGApp; |
Here first we are creating our floating button using the TouchableOpacity. Then we are adding styling to our button.
Run the application: Now run the application using the below command in the terminal.
npm run web
Output:
