Initial commit

Author: tutsblog

App.js

@@ -1,21 +1,18 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Provider } from 'react-redux';
+import AppRoute from './src/navigations/navigator';
+import { store } from './src/redux/store';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <>
+      <Provider store={store}>
+        <AppRoute />
+        <StatusBar style="auto" />
+      </Provider>
+    </>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+

package.json

@@ -8,12 +8,18 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
+    "@reduxjs/toolkit": "^1.6.2",
     "expo": "~43.0.2",
     "expo-status-bar": "~1.1.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
-    "react-native-web": "0.17.1"
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.8.0",
+    "react-native-web": "0.17.1",
+    "react-redux": "^7.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

src/navigations/app-navigator.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import DashboardScreen from '../screens/DashboardScreen';
+import AccountScreen from '../screens/AccountScreen';
+
+
+const Stack = createNativeStackNavigator();
+
+const AppNavigator = () => {
+    return (
+        <Stack.Navigator initialRouteName='Dashboard'>
+            <Stack.Screen name="Dashboard" component={DashboardScreen} />
+            <Stack.Screen name="Account" component={AccountScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default AppNavigator

src/navigations/auth-navigator.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LoginScreen from '../screens/LoginScreen';
+import RegisterScreen from '../screens/RegisterScreen';
+
+const Stack = createNativeStackNavigator();
+
+const AuthNavigator = () => {
+    return (
+        <Stack.Navigator initialRouteName='Login'>
+            <Stack.Screen name="Login" component={LoginScreen} />
+            <Stack.Screen name="Register" component={RegisterScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default AuthNavigator

src/navigations/navigator.js

@@ -0,0 +1,22 @@
+
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import AppNavigator from './app-navigator';
+import AuthNavigator from './auth-navigator';
+import { useSelector } from 'react-redux';
+import { selectIsLoggedIn } from '../redux/slices/authSlice';
+
+const AppRoute = () => {
+    const isLoggedIn = useSelector(selectIsLoggedIn);
+    return (
+        <NavigationContainer>
+            {/* Conditional stack navigator rendering based on login state */}
+
+            {
+                isLoggedIn ? <AppNavigator /> : <AuthNavigator />
+            }
+        </NavigationContainer>
+    )
+}
+
+export default AppRoute

src/redux/slices/authSlice.js

@@ -0,0 +1,36 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+
+const initialState = {
+    isLoggedIn: false,
+    email: null,
+    userName: null
+}
+
+const authSlice = createSlice({
+    name: 'userAuth',
+    initialState,
+    reducers: {
+        setSignIn: (state, action) => {
+
+            state.email = action.payload.email;
+            state.isLoggedIn = action.payload.isLoggedIn;
+            state.userName = action.payload.userName;
+
+        },
+        setSignOut: (state) => {
+            state.email = null;
+            state.userName = null;
+            state.isLoggedIn = false;
+        }
+    }
+});
+
+
+export const { setSignIn, setSignOut } = authSlice.actions;
+
+export const selectIsLoggedIn = (state) => state.userAuth.isLoggedIn;
+export const selectEmail = (state) => state.userAuth.email;
+export const selectUserName = (state) => state.userAuth.userName;
+
+export default authSlice.reducer;

src/redux/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit'
+import authSlice from './slices/authSlice'
+
+export const store = configureStore({
+    reducer: {
+        userAuth: authSlice
+    },
+})

src/screens/AccountScreen.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+const AccountScreen = () => {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>
+                Wellcome to Dashboard
+            </Text>
+        </View>
+    )
+}
+
+export default AccountScreen

src/screens/DashboardScreen.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { View, Text, TouchableOpacity } from 'react-native';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectIsLoggedIn, selectEmail, selectUserName, setSignOut } from '../redux/slices/authSlice';
+
+
+const DashboardScreen = () => {
+    const dispatch = useDispatch();
+    const username = useSelector(selectUserName);
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }}>
+            <Text>
+                Wellcome to Dashboard, {username}
+            </Text>
+            <TouchableOpacity
+                style={{ backgroundColor: 'red', paddingHorizontal: 50, paddingVertical: 15, margin: 10 }}
+                onPress={() => dispatch(setSignOut())}
+            >
+                <Text style={{ color: 'white' }}>Sign out</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+export default DashboardScreen

src/screens/LoginScreen.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useDispatch } from 'react-redux'
+import { setSignIn } from '../redux/slices/authSlice';
+
+
+const LoginScreen = () => {
+    const dispatch = useDispatch();
+
+    const handleLogin = () => {
+        const user = {
+            isLoggedIn: true,
+            email: '[email protected]',
+            userName: 'johnDoe'
+        };
+
+        dispatch(setSignIn(user));
+    }
+
+    return (
+        <View style={styles.container}>
+            <Text style={{ marginBottom: 20, fontSize: 15 }}>Login Screen</Text>
+            <TouchableOpacity onPress={handleLogin} style={styles.btn}>
+                <Text style={styles.text}>Sign In</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+export default LoginScreen
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    btn: {
+        backgroundColor: 'blue',
+        paddingHorizontal: 50,
+        paddingVertical: 10,
+        borderRadius: 10
+    },
+    text: {
+        color: 'white',
+        fontSize: 20
+    }
+})

src/screens/RegisterScreen.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+const RegisterScreen = () => {
+    return (
+        <View style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5FCFF',
+        }}>
+            <Text style={{ marginBottom: 20, fontSize: 15 }}>Login Screen</Text>
+
+        </View>
+    )
+}
+
+export default RegisterScreen
+