React Navigation 5 with Auth Screens Navigation and DarkMode Theme using Redux

If you’re already familiar with React Native then you’ll be able to get moving with React Navigation quickly! If not, you may want to read sections 1 to 4 (inclusive) of React Native Express first, then come back here when you’re done.

What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.

Photo by Pathum Danthanarayana on Unsplash

Installation

You just need to add some of the basic navigation libraries and you are set for creating basic stack navigation in react native.

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
cd ios && pod install && ..

Initial Navigation Route file

Create a unique file called Routes.js and add this code there. You can create your own custom components file. Here I am using some custom files which are having stack navigation and there authentication is managed by the auth token saved in Redux.

import React from 'react';
import {NavigationContainer,DarkTheme,DefaultTheme} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {useSelector} from 'react-redux';
import Home from '../screens/common/Home';
import ListScreen from '../screens/common/ListScreen';
import Login from '../screens/auth/Login';
import SignUp from '../screens/auth/SignUp';
import Settings from '../screens/common/Settings';
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
const AppStack = createStackNavigator();
const AuthScreens = () => (
 <AuthStack.Navigator>
  <Stack.Screen
   name="Login"
   component={Login}
   options={{headerShown: false}}
  />
  <Stack.Screen
   name="SignUp"
   component={SignUp}
   options={{headerShown: false}}
  />
 </AuthStack.Navigator>
);
const AppScreens = () => (
 <AppStack.Navigator>
  <Stack.Screen name="Home" component={Home} options={{headerShown: false}} />
 <Stack.Screen
  name="ListScreen"
  component={ListScreen}
  options={{headerShown: false}}
 />
 <Stack.Screen
  name="Settings"
  component={Settings}
  options={{headerShown: false}}
 />
</AppStack.Navigator>
);
const customDarkTheme = {
...DarkTheme,
colors: {
...DarkTheme.colors,
textColor: '#fff',
bgColor: '#202040',
danger: 'tomato',
},
};
const customDefaultTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
textColor: '#002856',
bgColor: '#fff',
danger: 'tomato',
},
};
export const Route = () => {
const currentTheme = useSelector((state) => state.appData.changeTheme);
const token = useSelector((state) => state.appData.token);
return (
<NavigationContainer theme={currentTheme ? customDarkTheme : customDefaultTheme}>
{token ? (
<AppScreens options={{animationEnabled: false}} />
) : (<AuthScreens options={{animationEnabled: false}} />)}
</NavigationContainer>
);
};

App.js file

Just add the basic structure of the Redux and handle the theme here which is provided by default by the react-navigation package. I am storing the theme state via redux to manage it throughout the app and it persists until you toggle it back to normal.

import React from 'react';
import {Route} from './src/navigation/routes';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {Store, persistor} from './src/store';
import {StatusBar} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';const App = () => {
 RNBootSplash.hide();
 return (
  <Provider store={Store}>
   <PersistGate loading={null} persistor={persistor}>
   <StatusBar backgroundColor="#000" barStyle="light-content" /
    <Route />
   </PersistGate>
  </Provider>
);
};export default App;

Handle Theme toggle Code:

Here is the basic button which will toggle between icons and change the theme accordingly. You can create your own custom component and check if it works. Here is the basic code structure to toggle theme from dark to light and vice versa.

import * as wpActions from '../../store/actions';
import {useDispatch, useSelector} from 'react-redux';
import Icon from 'react-native-vector-icons/Feather';
import {useTheme} from '@react-navigation/native';
const Settings = ({navigation}) => {
const dispatch = useDispatch();
const {colors} = useTheme();
const theme = useSelector((state) => state.appData.theme);
const manageDarkMode = () => {
dispatch(wpActions.changeTheme(!currentTheme));
setCurrentTheme(!currentTheme);
console.log(currentTheme, theme);
};
return (
<SafeAreaView style={[styles.container, {backgroundColor: colors.bgColor}]}>
<View style={inlineStyles.list}>
  <Text style={[inlineStyles.item, {color: colors.textColor}]}>
    Choose Theme
  </Text>
  <Icon name={currentTheme ? 'sun' : 'moon'} size={24} 
   color={currentTheme ? 'yellow' : 'blue'} 
   onPress={() => manageDarkMode()}
  />
</View>
</SafeAreaView>
);

Conclusion: Check out the code for React Navigation and Dark theme integration via React Native 5.