React Native Appearance addChangeListener

The Appearance module is a part of the React Native framework which provides a way to detect whether the user's device is using a light or dark color scheme. This is useful if you want to apply different styles to your app based on the user's preferences.

import { Appearance } from 'react-native';

Appearance.addChangeListener(({ colorScheme }) => {
  // Handle color scheme change
});

The addChangeListener function allows you to register a callback function that will be called whenever the color scheme changes. The callback function receives an object as its argument with a colorScheme property that can have a value of either "light" or "dark".

// Example code to demonstrate how to handle color scheme change
import { StyleSheet, View } from 'react-native';
import { Appearance } from 'react-native';

export default function App() {
  const [backgroundColor, setBackgroundColor] = useState('');

  useEffect(() => {
    const handleColorSchemeChange = ({ colorScheme }) => {
      if (colorScheme === 'light') {
        setBackgroundColor('#FFFFFF'); // Set background color to white
      } else {
        setBackgroundColor('#000000'); // Set background color to black
      }
    };

    Appearance.addChangeListener(handleColorSchemeChange);
    return () => {
      // Remove the listener when the component unmounts
      Appearance.removeChangeListener(handleColorSchemeChange);
    };
  }, []);

  return (
    <View style={[styles.container, { backgroundColor }]}>
      {/* Your app content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

In the above code example, we are using the useState hook to manage the backgroundColor state. We set the initial value of backgroundColor to an empty string as we want to dynamically update this state based on the user's color scheme preferences.

We then use the useEffect hook to register the handleColorSchemeChange function as a callback that will be called whenever the color scheme changes.

Inside the handleColorSchemeChange function, we check the value of the colorScheme property and set the backgroundColor state accordingly. We then use this backgroundColor state to style our app container view.

Finally, we return our app content inside the View element and apply the dynamically updated backgroundColor style.

Overall, the Appearance module is a useful way to provide a seamless user experience by adapting your app's style to the user's color scheme preferences. The addChangeListener function allows you to register a callback that will be called whenever the color scheme changes, which enables you to apply different styles to your app based on the user's preferences.