Reaccionar API de cambio nativo

En este artículo, vamos a ver cómo usar Switch en react-native . Para ello, vamos a utilizar el componente Switch. Es un componente controlado que requiere una función de devolución de llamada que actualiza los accesorios para mostrar la acción del usuario.

Sintaxis: 

<Switch
       // props
       trackColor={}
       thumbColor={}
       value={}
/>

Accesorios en Switch: 

• Deshabilitado: si su valor es verdadero, el usuario no podrá alternar el interruptor.
• ios_backgroundColor: Solo está disponible para IOS. Es básicamente para el color de fondo personalizado en IOS.
• onChange: se invoca cuando un usuario intenta cambiar el valor del interruptor. Recibe el evento de cambio como argumento.
• onValueChange: también se invoca cuando un usuario intenta cambiar el valor del interruptor. Pero recibe un valor modificado como argumento en lugar del evento.
• thumbColor: es básicamente el color del control del interruptor de primer plano.
• trackColor: Es básicamente el color de la pista del interruptor.
• valor: Es el valor del interruptor. Por defecto, es falso.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto:

Ejemplo: Ahora implementemos el Switch. Aquí creamos un interruptor y cuando alguien cambia el interruptor, el color del interruptor y el texto cambiarán.

Aplicación.js

import React , {useState} from 'react';
import {StyleSheet,
        Text,
        View,
        Switch
        } from 'react-native';
  
export default function App() {
  
  const [Enable , setEnable]  = useState(false);
    
  // Toggle function
  const toggle = (state)=>{
    setEnable(state);
  }
  
  return (
    <View style={styles.container}>
      <Text style={{color : Enable ? "red" : "green"}}>
        GeeksforGeeks
      </Text>
      <Switch
        trackColor={{ false: "#43f746", true: "#63dff2" }}
        thumbColor={Enable ? "#faf68c" : "#e243f7"}
        onValueChange={toggle}
        value={Enable}
      />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.   

Referencia: https://reactnative.dev/docs/switch