¿Cómo crear un componente CheckBox personalizado en React Native?

React Native tiene que ver con los componentes. Proporciona muchos componentes integrados para que los usemos. Al usar este componente, podemos crear una hermosa interfaz de usuario para aplicaciones móviles. Pero le faltan algunos de los componentes. Y CheckBox es uno de ellos. React Native no proporciona ningún componente integrado que podamos usar como casilla de verificación. Una casilla de verificación es un widget gráfico que permite al usuario realizar múltiples elecciones. Los usuarios pueden seleccionar varias casillas de verificación de las opciones dadas a la vez. Debido a que no tenemos ningún componente de casilla de verificación en React Native, crearemos un componente CheckBox personalizado por nuestra cuenta. Las bibliotecas de terceros, como React-Native-elements, también proporcionan componentes de casillas de verificación, pero al crear las nuestras, podemos tener más control sobre su funcionalidad y personalización. 

Crear aplicación:

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: Ahora ve a la carpeta del proyecto y ejecuta el siguiente comando para iniciar el servidor.

cd "Your_Project_Name"

Paso 5: Crea un nuevo archivo llamado CheckBox.js. Este archivo es un componente personalizado que usaremos para mostrar la casilla de verificación.

touch CheckBox.js

Estructura del proyecto: Tendrá el siguiente aspecto.

Archivo CheckBox.js

Enfoque: crearemos un componente personalizado llamado CheckBox en React Native. Escribiremos este código en el archivo CheckBox.js . Y luego usamos este componente en cada lugar donde queremos usar la casilla de verificación.

En este ejemplo, crearemos un componente CheckBox personalizado. Este componente lo usaremos más adelante en el archivo principal App.js.

Paso 1: Abra el archivo CheckBox.js que hemos creado anteriormente. Escriba debajo del código en ese archivo.

En este archivo, devolveremos una vista con 2 componentes. Tiene un icono para la casilla de verificación y un texto para esa casilla de verificación. Este CheckBox personalizado tomará 3 accesorios.

1. título: Texto para la casilla de verificación.
2. isChecked: valor booleano para mostrar si la casilla de verificación está marcada o no. El ícono de la casilla de verificación cambiará de acuerdo con la propiedad isChecked.
3. onPress: una función que se llamará cuando el usuario presione esa casilla de verificación.

import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import { MaterialCommunityIcons } from "@expo/vector-icons";
  
const CheckBox = (props) => {
    const iconName = props.isChecked ?
        "checkbox-marked" : "checkbox-blank-outline";
  
    return (
        <View style={styles.container}>
            <Pressable onPress={props.onPress}>
                <MaterialCommunityIcons 
                    name={iconName} size={24} color="#000" />
            </Pressable>
            <Text style={styles.title}>{props.title}</Text>
        </View>
    );
};
  
export default CheckBox;
  
const styles = StyleSheet.create({
    container: {
        justifyContent: "flex-start",
        alignItems: "center",
        flexDirection: "row",
        width: 150,
        marginTop: 5,
        marginHorizontal: 5,
    },
    title: {
        fontSize: 16,
        color: "#000",
        marginLeft: 5,
        fontWeight: "600",
    },
});

Paso 2: Abra el archivo App.js y escriba el siguiente código en ese archivo.

App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, usaremos nuestro componente CheckBox personalizado. Crearemos 3 estados para 3 casillas de verificación. Inicialmente, tendrá un valor booleano de falso. Asignamos este estado a la propiedad isChecked de CheckBox. También proporcionaremos un título para cada casilla de verificación y una función para marcar/desmarcar las casillas de verificación específicas.

import { StyleSheet, View } from "react-native";
import { useState } from "react";
import CheckBox from "./CheckBox";
  
export default function App() {
    const [music, setMusic] = useState(false);
      const [dancing, setDancing] = useState(false);
      const [reading, setReading] = useState(false);
  
    return (
        <View style={styles.container}>
            <CheckBox
                onPress={() => setMusic(!music)}
                title="Music"
                isChecked={music}
              />
              <CheckBox
                onPress={() => setDancing(!dancing)}
                title="Dancing"
                isChecked={dancing}
              />
              <CheckBox
                onPress={() => setReading(!reading)}
                title="Reading"
                isChecked={reading}
              />
        </View>
      );
    }
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        justifyContent: "center",
        alignItems: "center",
      },
});

Producción:

Componente CheckBox personalizado

Así es como puede crear un componente CheckBox personalizado en React Native. Puedes reutilizarlo tantas veces como quieras. Y puede personalizarlo según sus requisitos.