splash screen and redux

package.json

@@ -26,7 +26,8 @@
     "react-native-screens": "^4.11.1",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^15.12.0",
-    "react-native-vector-icons": "^10.2.0"
+    "react-native-vector-icons": "^10.2.0",
+    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/App.js

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

yarn.lock

@@ -1928,6 +1928,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/use-sync-external-store@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
+  integrity sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==
+
 "@types/yargs-parser@*":
   version "21.0.3"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
@@ -5789,6 +5794,14 @@ react-native@0.80.0:
     ws "^6.2.3"
     yargs "^17.6.2"
 
+react-redux@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.2.0.tgz#96c3ab23fb9a3af2cb4654be4b51c989e32366f5"
+  integrity sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==
+  dependencies:
+    "@types/use-sync-external-store" "^0.0.6"
+    use-sync-external-store "^1.4.0"
+
 react-refresh@^0.14.0:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
@@ -6631,7 +6644,7 @@ use-latest-callback@^0.2.4:
   resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.2.4.tgz#35c0f028f85a3f4cf025b06011110e87cc18f57e"
   integrity sha512-LS2s2n1usUUnDq4oVh1ca6JFX9uSqUncTfAm44WMg0v6TxL7POUTk1B044NH8TeLkFbNajIsgDHcgNpNzZucdg==
 
-use-sync-external-store@^1.5.0:
+use-sync-external-store@^1.4.0, use-sync-external-store@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
   integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==