Search code examples
react-nativereact-navigationreact-navigation-v5react-navigation-stackreact-navigation-bottom-tab

Dark Mode not working React Navigation React Native

I Am working on this to implement Dark Mode in React Native using React Navigation. but it changes only the bottom bar navigator not the screens inside that. can you help me with this

Snack Code

https://snack.expo.io/@belgin/news-app

Solution

  • You're responsible for styling inside your own components. You're styling background as light, setting navigation theme to dark is not gonna magically change the colors you have defined.

    For changing themes to work for your components, you need to use the useTheme hook to set colors in your own components instead of hardcoding them.

    import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@react-navigation/native';

function MyScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      {/* screen content */}
    </View>
  );
}

    https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components