'useColorScheme' (React Native Hook)

#react-native #react-native_Hook

First import 'useColorScheme' from the react-native library,

example:

import {useColorScheme} from 'react-native';

Explanation: The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).

Three Types of color schemes:

• light

• dark

• null

here is My Output and source code :

import { View, Text, StyleSheet, useColorScheme } from 'react-native';
import React from 'react';

const AppPro = () => {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <View style={[styles.container, { backgroundColor: isDarkMode ? '#000000' : '#FFFFFF' }]}>
    {/* // <View style={styles.container}> */}
      <Text style={isDarkMode ? styles.whiteText : styles.darkText}>Har har mahadev</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    // backgroundColor: '#000000',
  },
  whiteText: {
    color: '#FFFFFF',
  },
  darkText: {
    color: '#000000',
  },
});

export default AppPro;