How to add Floating Buttons in React Native ?

Last Updated : 30 Mar, 2022

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 }}> 
                GeeksforGeeks 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;