splash screen and redux

src/App.js

@@ -1,12 +1,15 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+// In App.js in a new project
+import * as React from 'react';
+import {Provider} from 'react-redux';
+import Routes from './navigation/Routes';
+import { store } from './redux/store';
 
-const App = () => {
-    return (
-        <View style={{flex:1 , justifyContent:'center',alignItems:'center'}}>
-            <Text>App</Text>
-        </View>
-    )
+function App() {
+  return (
+    <Provider store={store}>
+      <Routes />
+    </Provider>
+  );
 }
 
-export default App
+export default App;

src/constants/Images.js

@@ -1,5 +1,6 @@
 const IMAGES = {
-    AppLogo: require('../assets/Icons/appIcon.png'),
+    // AppLogo: require('../assets/Images/logo.png'),
+    AppLogo: require('../assets/Images/logo.png'),
     filterIcon: require('../assets/Icons/filter.png'),
     menuIcon: require('../assets/Icons/menu.png'),
     pluscircleIcon: require('../assets/Icons/pluscircle.png'),

src/navigation/Routes.js

@@ -0,0 +1,23 @@
+
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Splash from '../screens/AuthScreen/Splash';
+import Login from '../screens/AuthScreen/Login';
+
+const Stack = createNativeStackNavigator();
+
+const Routes = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{ headerShown: false }}
+        initialRouteName="Splash">
+        <Stack.Screen name="Splash" component={Splash} />
+        <Stack.Screen name="Login" component={Login} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default Routes;

src/redux/reducer/index.js

@@ -0,0 +1,5 @@
+import userSlice from '../slices/userSlice';
+
+export default {
+  user: userSlice,
+};

src/redux/slices/authSlice.js

@@ -0,0 +1,33 @@
+// // src/redux/slices/authSlice.js
+// import { createSlice } from '@reduxjs/toolkit';
+
+// const initialState = {
+//   token: null,
+//   loading: false,
+//   error: null,
+// };
+
+// const authSlice = createSlice({
+//   name: 'auth',
+//   initialState,
+//   reducers: {
+//     loginStart: (state) => {
+//       state.loading = true;
+//       state.error = null;
+//     },
+//     loginSuccess: (state, action) => {
+//       state.loading = false;
+//       state.token = action.payload;
+//     },
+//     loginFailure: (state, action) => {
+//       state.loading = false;
+//       state.error = action.payload;
+//     },
+//     logout: (state) => {
+//       state.token = null;
+//     },
+//   },
+// });
+
+// export const { loginStart, loginSuccess, loginFailure, logout } = authSlice.actions;
+// export default authSlice.reducer;

src/redux/slices/userSlice.js

@@ -0,0 +1,25 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+const initialState = {
+  token: '',
+};
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+        token: action?.payload?.usertoken,
+      };
+    },
+    resetUserState() {
+      return initialState;
+    },
+  },
+});
+
+export const {setUser, resetUserState} = userSlice.actions;
+export default userSlice.reducer;

src/redux/store.js

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

src/screens/AuthScreen/Login/index.js

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+const Login = () => {
+    return (
+        <View>
+            <Text>Login</Text>
+        </View>
+    )
+}
+
+export default Login

src/screens/AuthScreen/Splash/index.js

@@ -0,0 +1,99 @@
+import {View, Text, Image, Dimensions, StyleSheet} from 'react-native';
+import React, {useEffect} from 'react';
+import IMAGES from '../../../constants/Images';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useDispatch} from 'react-redux';
+
+const SplashScreen = ({navigation}) => {
+  const dispatch = useDispatch();
+
+//   const get_token = async () => {
+//     let token = await AsyncStorage.getItem('@Collector_User');
+//     console.log(token);
+
+//     token = JSON.parse(token);
+
+//     if (token) {
+//       dispatch(setUser(token));
+//       navigation.reset({
+//         index: 0,
+//         routes: [{name: 'mainStack', params: {screen: 'dashboard'}}],
+//       });
+//     } else {
+//       setTimeout(() => {
+//         navigation.reset({
+//           index: 0,
+//           routes: [{name: 'Login'}],
+//         });
+//       }, 2000);
+//     }
+//   };
+
+  useEffect(() => {
+    // get_token();
+     setTimeout(() => {
+        navigation.reset({
+          index: 0,
+          routes: [{name: 'Login'}],
+        });
+      }, 4000);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.backgroundContainer}>
+        <Image
+          source={IMAGES.splashFullImg}
+          resizeMode="stretch"
+          style={styles.backdrop}
+        />
+      </View>
+      <View style={styles.overlay}>
+        <Image style={styles.logo} source={IMAGES.AppLogo} />
+      </View>
+    </View>
+  );
+};
+
+export default SplashScreen;
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlay: {
+    opacity: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    backgroundColor: 'rgba(0,0,0,0)',
+    height: 200,
+    width: 200,
+    overflow: 'hidden',
+    resizeMode: 'contain',
+    marginTop: 5,
+    justifyContent: 'center',
+  },
+  backdrop: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  headline: {
+    fontSize: 18,
+    textAlign: 'center',
+    backgroundColor: 'black',
+    color: 'white',
+    //borderWidth:1
+  },
+});