¿Cómo crear un FAB (botón de acción flotante) personalizado en React Native?

React Native no viene con ningún componente FAB incorporado. Se utiliza un botón de acción flotante (FAB) siempre que desee mostrar un botón en la parte superior de todo. Si ha utilizado ScrollView y el usuario puede desplazarse hacia arriba y hacia abajo, este botón FAB siempre permanecerá en la misma posición y no se moverá con el desplazamiento. Puedes hacer este botón en un círculo o en forma de cuadrado. Puede poner iconos o texto en el medio.

Hay varias bibliotecas que le brindan botones FAB preconstruidos. Pero también puede crear uno por su cuenta para obtener la máxima flexibilidad y personalizarlo como desee.

Enfoque: crearemos un componente personalizado llamado FAB que podemos reutilizar en cualquier lugar donde queramos mostrar FAB en la pantalla. Este componente personalizado FAB tendrá algunos accesorios para que podamos personalizarlo de la forma que queramos.

Creando la aplicación React:

Paso 1: Abra su Terminal y ejecute el siguiente comando. Instalará Expo CLI globalmente en su sistema.

npm install -g expo-cli

Paso 2: ahora, cree un nuevo proyecto nativo de React ejecutando el siguiente comando.

expo init "Your_Project_Name"

Paso 3: Se le pedirá que elija una plantilla. Seleccione la plantilla en blanco.

Paso 4: Cree un nuevo archivo llamado FAB.js. Este archivo es un componente personalizado para crear un botón FAB.

mkdir FAB.js

Paso 5: Ahora ve a la carpeta del proyecto y ejecuta el siguiente comando para iniciar el servidor.

cd "Your_Project_Name"
npm start

Estructura del proyecto: Tendrá el siguiente aspecto:

componente FAB

Ejemplo: abra el archivo FAB.js y escriba el siguiente código en ese archivo.

Este archivo contiene el código para el componente FAB personalizado. Tomará 2 accesorios, texto para el botón FAB y una función que se llamará cuando el usuario presione el botón. Este componente tendrá un color de fondo y un texto en el centro. También puede agregar iconos según sus requisitos. La función que se recibe como prop se asignará al evento onPress del componente Pressable. 

import { Pressable, StyleSheet, Text } from "react-native";
import React from "react";
  
const FAB = (props) => {
    return (
        <Pressable style={styles.container}
            onPress={props.onPress}>
            <Text style={styles.title}>{props.title}</Text>
        </Pressable>
    );
};
  
export default FAB;
  
const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 10,
        position: "absolute",
        bottom: 70,
        right: 40,
        backgroundColor: "#26653A",
        paddingHorizontal: 20,
        paddingVertical: 10,
    },
    title: {
        fontSize: 18,
        color: "#fff",
        fontWeight: "bold",
    },
});

• App.js: es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, usaremos el componente FAB personalizado que acabamos de crear. Pasaremos un texto como una string y una función que queremos llamar cada vez que el usuario presione el botón. Aquí, en este ejemplo, hemos creado una función llamada displayAlert, que invocará un cuadro de alerta con un mensaje.

import { StyleSheet, View } from "react-native";
import FAB from "./FAB";
  
export default function App() {
    const displayAlert = () => {
        alert("Welcome to GeeksforGeeks");
    };
  
    return (
        <View style={styles.container}>
            <FAB onPress={displayAlert} title="Add" />
        </View>
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
});

Producción: 

componente FAB

Así es como puede crear un botón FAB personalizado por su cuenta en React Native, le proporcionará mucha más flexibilidad que un componente preconstruido de terceros.