¿Cómo crear un botón de acción flotante en reaccionar nativo?

React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de ReactJs .
• Html, CSS y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, crearemos un botón de acción flotante en react-native. Para crearlo, usaremos la biblioteca  react-native-paper .

En nuestro proyecto, crearemos un FAB y al hacer clic en él, aparecerá el campo de texto. Veremos la implementación paso a paso.

Creación de la aplicación React Native:

Paso 1: Cree un proyecto nativo de reacción:

npx react-native init DemoProject

Paso 2: ahora instala react-native-paper

npm install react-native-paper

Paso 3: Inicie el servidor

npx react-native run-android

Paso 4: Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo Fab.js

Estructura del proyecto: El proyecto debería verse así:

Ejemplo: en Fab.js, inicialmente, el campo de entrada y el botón estarán ocultos. Al cambiar de estado, ambos aparecerán debajo del botón Fab.

import React, { useState } from 'react';
import { View, StyleSheet, Alert, Button } from 'react-native';
import { FAB, TextInput } from 'react-native-paper';
  
const FabExample = () => {
  const [text, setText] = useState('');
  const [showText, setShowText] = useState(false);
  const [disablebtn, setDisablebtn] = useState(true);
  
  const addItem = (text) => {
    setShowText(true);
  };
  const showAlert = () => {
    Alert.alert('Item added successfully');
  };
  
  return (
    <View>
      <FAB style={styles.fab} icon="plus" small label="Add more"
           onPress={addItem} />
      {showText ? (
        <View style={styles.textInput}>
          <TextInput
            mode="outlined"
            label="Item"
            value={text}
            onChangeText={(newText) => {
              setText(newText);
              setDisablebtn(false);
            }}
          />
          <View style={styles.btn}>
            <Button title="Submit" disabled={disablebtn} 
                    onPress={showAlert} />
          </View>
        </View>
      ) : (
        <></>
      )}
    </View>
  );
};
  
export default FabExample;
  
const styles = StyleSheet.create({
  fab: {
    position: 'relative',
    margin: 16,
    marginTop: 40,
    right: 0,
    bottom: 0,
  },
  textInput: {
    position: 'relative',
    margin: 18,
  },
  btn: {
    marginTop: 20,
  },
});

import React from 'react';
import { View } from 'react-native';
import FabExample from './components/Fab';
  
const App: () => Node = () => {
  return (
    <View>
      <FabExample />
    </View>
  );
};
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npx react-native run-android

Producción: