Hello friends, very warm welcome to my next article. I hope you have pretty much styled your Hello World app by following my previous article. So today we will be learning what is useColorScheme hook in React Native and how we can use it.

Below is our App.tsx file having basic code to display Hello World on screen:

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

function App(): JSX.Element {
  return (
      <View>
        <Text>Hello World!!!</Text>
      </View>
  );
}

What is useColorScheme hook?

• The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module.

• The Appearance module exposes information about the user's appearance preferences i.e. the mode they have enabled (light/dark).

• So suppose, I have enabled dark mode in my mobile then the useColorScheme hook will guess this and return the value as 'dark'.

• Now let's see how we can use it in our app.

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

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
      <View style={[styles.container, isDarkMode ? {backgroundColor: 'black'} : null]}>
        <Text style={isDarkMode ? styles.whiteText : styles.blackText}>
          Hello World!!!
        </Text>
      </View>
  );
}

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

export default App;

Let's see step by step what we are doing in the above code:

• The first thing is importing useColorScheme hook in our project.

• The line const isDarkMode = useColorScheme() === 'dark'; , indicates that if the value returned by useColorScheme() is dark then set isDarkMode value to true.

• From this line, you can understand what is the use of this hook. It will simply return 'dark' if you switch on the dark mode in your mobile otherwise it will return 'light'.

• Now inside the return statement, we have modified the JSX element a bit.

• Here we are doing a conditional style application on View and Text components.

• View:

  1. For this component we are applying two styles hence we have wrapped them inside a bracket [ ].

  2. The first style is simple, we are applying the container style which will bring our text to the center and increase the font size.

  3. The next style uses conditional rendering:
     isDarkMode ? {backgroundColor: 'black'} : null
     Here we are saying if isDarkMode is true then apply a "black" background color to View otherwise do nothing (which means the background color will remain "white" by default)

• Text:

  1. For this component, we are applying the style conditionally.

  2. We are giving "white" color to text if dark mode is on otherwise we are giving "black" color to text.

• And lastly, if you see then we have style definitions that we have applied to our components.

useColorScheme hook makes our life easy because to check if dark mode is enabled on phone we don't need to write much code. Just one simple method call and we are ready to go.

Friends, that's it for today. I hope you enjoyed this session. Try this on your app by toggling dark mode on and off and let me know if you get any issues. Happy learning!

---

Special thanks to Hitesh Choudhary !!!