Expo update and fixed imports

App.js

@@ -8,7 +8,8 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import store from "./store";
 // import { Counter } from './screens/Counter'
 import { LogIn } from './screens/LogIn';
-import { createStackNavigator } from '@react-navigation/stack';
+import { Counter } from './screens/Counter';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 
 const A = () => <View><Text>Home</Text></View>
@@ -16,7 +17,7 @@ const B = () => <View><Text>Settings</Text></View>
 const C = () => <View><Text>C</Text></View>
 
 const Tab = createBottomTabNavigator();
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const Home = () => {
   return (
@@ -31,6 +32,8 @@ function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
+        {/* <Stack.Screen name='Counter' component={Counter} /> */}
+        <Stack.Screen name="Login" component={LogIn} />
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Profile" component={C} />
       </Stack.Navigator>

components/Buttons/Button.jsx

@@ -9,7 +9,7 @@ export default Button = ({ onPress, title, style }) => {
       style={[{ paddingHorizontal: hp("2.6%"), justifyContent: "space-between" }, styles.widgetBox, style]}
     >
       <View style={[styles.alignCenter, styles.row]}>
-        <Text trunk={true} numberOfLines={2} style={{ color: "#4C5A81", fontSize: hp("2.3%"), textAlign: 'center' }}>{title}</Text>
+        <Text trunk={true} numberOfLines={2} style={{ color: "#FFF", fontSize: hp("2.3%"), textAlign: 'center' }}>{title}</Text>
       </View>
     </TouchableOpacity>
   );

package.json

@@ -8,30 +8,33 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "^5.11.11",
-    "@react-navigation/native": "^5.9.4",
-    "@reduxjs/toolkit": "^1.5.1",
-    "axios": "^0.21.1",
-    "expo": "~41.0.1",
-    "expo-status-bar": "~1.0.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-reanimated": "~2.1.0",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-masked-view/masked-view": "0.2.8",
+    "@react-navigation/bottom-tabs": "^6.4.3",
+    "@react-navigation/native": "^6.0.16",
+    "@react-navigation/native-stack": "^6.9.4",
+    "@reduxjs/toolkit": "^1.9.1",
+    "axios": "^1.2.1",
+    "expo": "^47.0.8",
+    "expo-status-bar": "~1.4.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-gesture-handler": "~2.8.0",
+    "react-native-reanimated": "~2.12.0",
     "react-native-responsive-screen": "^1.4.2",
-    "react-native-safe-area-context": "3.2.0",
-    "react-native-screens": "~3.0.0",
-    "react-native-svg": "12.1.0",
-    "react-native-svg-transformer": "^0.14.3",
-    "react-native-web": "~0.13.12",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
+    "react-native-svg": "13.4.0",
+    "react-native-svg-transformer": "^1.0.0",
+    "react-native-web": "~0.18.7",
     "react-navigation-stack": "^2.10.4",
-    "react-redux": "^7.2.4",
-    "redux-thunk": "^2.3.0"
+    "react-redux": "^8.0.5",
+    "redux-batched-actions": "^0.5.0",
+    "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0"
+    "@babel/core": "^7.19.3"
   },
   "private": true
 }

screens/LogIn.jsx

@@ -1,33 +1,66 @@
 import React from "react";
 import { useState } from "react";
-import { View, TextInput } from "react-native";
+import { View, TextInput, Text, StyleSheet } from "react-native";
 import Button from "../components/Buttons/Button";
 import { login } from "../thunks/user.thunk";
+import { useDispatch } from "react-redux";
 
 export const LogIn = () => {
 
   const [username, setUsername] = useState()
   const [password, setPassword] = useState()
   const [error, setError] = useState()
+  const dispatch = useDispatch();
+
+  const loginHandler = () => {
+    dispatch(
+      login(username, password, function (result) {
+        console.log(result.data)
+        if (!result.OK) {
+          setUsername("");
+          setPassword("");
+          setError(result.data.Message ? result.data.Message : "Error occurred during Login,please try again!");
+        }
+      })
+    )
+  }
 
   return (
-    <View>
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <Text style={styles.errorMessage}>{error && error}</Text>
       <TextInput focus={true}
-        style={{ marginTop: 20 }}
-        placeholder='Username' />
+        style={styles.input}
+        placeholder='Username'
+        placeholderTextColor='#000' 
+        value={username} 
+        onChangeText={setUsername} 
+        />
       <TextInput focus={true}
-        style={{ marginTop: 20 }}
+        style={styles.input}
         placeholder='Password'
+        placeholderTextColor='#000'
+        value={password}
+        onChangeText={setPassword}
         secureTextEntry />
-      <Button onPress={() => dispatch(
-        login(username, password, function (result) {
-          if (!result.OK) {
-            setUsername("");
-            setPassword("");
-            setError(result.data.Message ? result.data.Message : "Error occurred during Login,please try again!");
-          }
-        })
-      )} title='Log In' style={{ backgroundColor: 'red' }} />
+      <Button 
+        onPress={loginHandler} 
+        title='Log In' 
+        style={{ margin: 12, backgroundColor: '#3E5076' }} 
+        />
     </View>
   )
-}
+}
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5
+  },
+  errorMessage: {
+    color: 'red',
+    margin: 12
+  }
+});

service/endpointDef.js

@@ -1 +1 @@
-export const API_ENDPOINT = __DEV__ ? "https://mystratadevapi.kalla.co/" : "https://my.kalla.co/";
+export const API_ENDPOINT ="https://my.kalla.co/";

service/index.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { setConnectionError } from "../store/actions";
-import store from "../store/store";
+import store from "../store/index";
 import { API_ENDPOINT } from './endpointDef';
 import { refreshTokens } from "./tokenService/tokenApiClient";
 

service/tokenService/index.js

@@ -1,4 +1,4 @@
-import store from '../../store/store';
+import store from '../../store/index';
 import { refreshTokens } from './tokenApiClient'
 import { validateAccessToken } from './validator'
 

service/tokenService/tokenApiClient.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { batchActions } from 'redux-batched-actions';
 import { logOut, setRefreshToken, setToken } from "../../store/actions";
-import store from "../../store/store";
+import store from "../../store/index";
 import { API_ENDPOINT } from '../endpointDef';
 
 let refreshingPromise = null

store/reducers/user.js

@@ -1,6 +1,6 @@
+import {createReducer} from '@reduxjs/toolkit'
 import { setToken, setRefreshToken, authLoaded, logOut, setUsername, logInSuccess, setConnectionError } from "../actions/index";
 
-
 export default createReducer({
   token: null,
   refreshToken: null,

thunks/user.thunk.js

@@ -1,9 +1,11 @@
-import { loginAPI, } from "../service/user";
+import { loginAPI } from "../service/user";
+import { setRefreshToken, setToken, setUsername } from "../store/actions";
 
 export const login = (username, password, callback) => {
   return (dispatch) =>
     loginAPI(username, password)
       .then((responseJson) => {
+        console.log('response', responseJson)
         if (responseJson.OK && responseJson.data.Data.AccessToken != null) {
           dispatch(batchActions([
             setToken(responseJson.data.Data.AccessToken),