0

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

Belgin Android
  • 309
  • 5
  • 19

2 Answers2

3

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

satya164
  • 9,464
  • 2
  • 31
  • 42
0

Other method is that, you can also create a state which can store your current view-mode (light/dark mode). This is very simple to implement using react-redux. You can refer this video to get better understanding of react and redux. This is far more simpler implementation of redux.

Note - dependencies such as thunk, react-redux, etc etc are not installed in this video. You can identify which dependencies you're gonna need step-by-step by following error that came in your way. Eg. if createStore gives error try to import createStore as legacy_createstore like done in this question

Kedar K
  • 41
  • 2
  • 10
  • Still if you need any assistance you can ask me, I have active repository examples which i can show you, incase you need to see how it is implemented. – Kedar K Sep 14 '22 at 19:37
  • Please upvote if found helpful or you got to learn something new – Kedar K Sep 14 '22 at 19:38