App doesnt detect state change but SigninScreen does - react-native

Question

I am trying to implement Auth flow using useContext
When I click the button on SignInScreen the state inside that screen changes and rerenders itself, showing token string under a button. Unfortunatelly App is still showing Signin screen, it doesnt detect that the state has changed.
App.tsx:
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SignUpScreen from './screens/SignUpScreen';
import SignInScreen from './screens/SignInScreen';
import { AuthProvider, useAuth } from './context/AuthContext';
const Stack = createNativeStackNavigator();
export default function App() {
const { token } = useAuth();
return (
<AuthProvider>
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator>
{token === null ? (
<>
<Stack.Screen name="Signin" component={SignInScreen} />
<Stack.Screen name="Signup" component={SignUpScreen} />
</>
) : (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
</AuthProvider>
);
}
AuthContext.tsx:
import * as React from 'react'
interface AuthState {
token: string | null
isLoading: boolean
publicAddress: string | null
}
type AuthAction = { type: 'SIGN_IN'; token: string } | { type: 'SIGN_OUT' }
type AuthPayload = string
interface AuthContextActions {
signIn: (data: AuthPayload) => void
signOut: () => void
}
interface AuthContextType extends AuthState, AuthContextActions {}
const AuthContext = React.createContext<AuthContextType>({
token: null,
isLoading: true,
publicAddress: null,
// eslint-disable-next-line #typescript-eslint/no-empty-function
signIn: () => {},
// eslint-disable-next-line #typescript-eslint/no-empty-function
signOut: () => {},
})
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const [state, dispatch] = React.useReducer(AuthReducer, {
token: null,
isLoading: true,
publicAddress: null,
})
const authActions: AuthContextActions = React.useMemo(
() => ({
signIn: async (token: string) => {
dispatch({ type: 'SIGN_IN', token })
console.log(state)
//await setToken(token) //TODO:
},
signOut: async () => {
//await removeToken() // TODO: use Vars
dispatch({ type: 'SIGN_OUT' })
},
}),
[]
)
return (
<AuthContext.Provider value={{ ...state, ...authActions }}>
{children}
</AuthContext.Provider>
)
}
const AuthReducer = (prevState: AuthState, action: AuthAction): AuthState => {
switch (action.type) {
case 'SIGN_IN':
console.log(action.token)
return {
...prevState,
token: action.token, //TODO:
isLoading: false
}
case 'SIGN_OUT':
return {
...prevState,
isLoading: false,
token: null
}
}
}
export const useAuth = (): AuthContextType => {
const context = React.useContext(AuthContext)
if (!context) {
throw new Error('useAuth must be inside an AuthProvider with a value')
}
return context
}
SignInScreen.tsx:
import React from "react";
import {View, Text, Button} from 'react-native'
import { useAuth } from "../context/AuthContext";
export default function SignInScreen(){
const {signIn, token} = useAuth();
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Login with metamask" onPress={() => {
console.log('pressed')
signIn('token')
}}/>
<Text>{token}</Text>
</View>
);
}