¿Cómo obtener el esquema de color preferido por el usuario en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, macOS, tvOS, Web, Windows y UWP al permitir que los desarrolladores usen el marco React junto con con capacidades de plataforma nativa. 

En este artículo, aprenderemos cómo podemos obtener un esquema de color preferido por el usuario en React Native.

Creación de la aplicación React Native:

Paso 1: usaremos expo para crear la aplicación nativa de reacción. Instale expo-cli usando el siguiente comando en la terminal.

npm install -g expo-cli

Paso 2: Cree un proyecto nativo de reacción usando expo.

expo init "gfg"

Paso 3: Ahora ve al proyecto creado usando el siguiente comando.

cd "gfg"

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 4: Obtener el esquema de color preferido del usuario: Vamos a utilizar el módulo de apariencia de react-native para determinar el esquema de color preferido del usuario. Para esto, agregue el siguiente código dentro del archivo App.js.

import { StyleSheet, Text, View, Appearance,
    useColorScheme} from 'react-native';
import React, {useState , useEffect} from 'react'
  
export default function App() {
  
  const [scheme, setScheme] = useState('')
  const colorScheme = useColorScheme();
  
  useEffect(()=>{
    const userDeviceColor = Appearance.getColorScheme();
    if (userDeviceColor === 'dark') {
      setScheme('Dark Scheme')
    }else if (userDeviceColor === 'light'){
      setScheme('Light Scheme')
    }
    return
  
  })
  
  return (
    <View style={styles.container}>
      <Text>GeeksforGeeks - Color Scheme React native</Text>
      <Text>{scheme}</Text>
      <Text>colorScheme:- {colorScheme}</Text>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Aquí estamos usando la función getColorScheme del módulo de apariencia para obtener el esquema de color preferido del usuario.

Ejecute la aplicación: Ahora ejecute la aplicación usando el siguiente comando en la terminal.

npm run web

Producción: