Usando el Componente <FAB> en React Native Paper: Un Contador Interactivo

En este artículo, aprenderás cómo usar el componente <FAB> (Floating Action Button) de la librería react-native-paper para crear un contador interactivo con funcionalidad adicional cuando se mantenga presionado el botón. Este ejemplo destaca la simplicidad y versatilidad de FAB en aplicaciones móviles.

Código del Componente Counter

A continuación, encontrarás el código completo para el componente Counter. Este utiliza un <FAB> para incrementar un contador y restablecerlo al mantener presionado el botón.

Counter.tsx

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { globalStyle } from '../../theme/global.styles';
import { FAB } from 'react-native-paper';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <View style={globalStyle.centerContainer}>
      <Text style={globalStyle.title}>{counter}</Text>
      <FAB
        onLongPress={() => setCounter(0)} // Resetea el contador al mantener presionado
        onPress={() => setCounter(counter + 1)} // Incrementa el contador al presionar
        style={globalStyle.fab}
        label="+1"
      />
    </View>
  );
};

Estilos Globales

Los estilos globales definen el diseño general de la interfaz, incluyendo la posición y apariencia del botón flotante.

La ruta para estos estilos estara en src/theme/global.styles.ts

global.styles.ts

import { Platform, StyleSheet } from 'react-native';

export const globalStyle = StyleSheet.create({
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 80,
    fontWeight: '300',
    color: 'black',
  },
  fab: {
    position: 'absolute',
    margin: 16,
    right: 0,
    bottom: Platform.OS === 'android' ? 15 : 0, // Ajusta la posición según la plataforma
    backgroundColor: 'pink',
    padding: 5,
    borderRadius: 100, // Redondeado para el diseño del FAB
  },
});

Explicación del Componente <FAB>

1. Propiedad onPress:

   • Incrementa el valor del contador cada vez que se presiona el botón.

2. Propiedad onLongPress:

   • Resetea el contador a 0 cuando el botón se mantiene presionado.

3. Propiedad label:

   • Agrega un texto al botón flotante, en este caso, +1.

4. Estilo del FAB:

   • Se posiciona en la esquina inferior derecha de la pantalla.
   • El color de fondo es pink.
   • El diseño es redondeado para reflejar un botón flotante clásico.

Resultado

Cuando implementes este código, obtendrás una pantalla con:

• Un contador centrado.
• Un botón flotante (FAB) en la esquina inferior derecha.
• Funcionalidad para incrementar el contador con un toque y restablecerlo con una pulsación larga.