¿Cómo agregar botones flotantes en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, macOS, tvOS, Web, Windows y UWP al permitir que los desarrolladores usen el marco React junto con con capacidades de plataforma nativa.

En este artículo, aprenderemos cómo agregar botones flotantes en React Native.

Creación de la aplicación React Native:

Paso 1: usaremos la exposición para crear la aplicación nativa de reacción. Instale expo-cli usando el siguiente comando en la terminal.

npm install -g expo-cli

Paso 2: Cree un proyecto nativo de reacción usando expo.

expo init "gfg"

Paso 3: Ahora ve al proyecto creado usando el siguiente comando.

cd "gfg"

Estructura del proyecto: Tendrá el siguiente aspecto.

Creación de botones flotantes: podemos agregar fácilmente botones flotantes en nuestra aplicación nativa de reacción. Para ello, vamos a utilizar el componente TouchableOpacity de react-native. 

Ejemplo: agregue el siguiente código en el archivo App.js.

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;

Aquí primero estamos creando nuestro botón flotante usando TouchableOpacity. Luego estamos agregando estilo a nuestro botón.

Ejecute la aplicación: Ahora ejecute la aplicación usando el siguiente comando en la terminal.

npm run web

Producción: