React Native Navigation: screen flickers when function interacts with SecureStorage - react-native

Question

The left gif shows the flickering of the screen when the Switch is pressed and the right image shows the screen at the moment when the flickering happens. That means that my Stack.Screen from #react-navigation/native-stack, that displays the Settings page gets removed for a small moment when the Switch is pressed, which results in the flicker effect.
The function that gets called when the Switch is pressed is my toggleLocalAuth function. This is an asynchronous function, so my guess would be that the screen flickers when the toggleLocalAuth is running.
const toggleLocalAuth = async () => {
await SecureStorage.save('local-auth', JSON.stringify(!usesLocalAuth))
setUsesLocalAuth((usesLocalAuth) => !usesLocalAuth)
}
This is my Security component which contains the Switch and the "Security" subheader.
const Security: React.FC = () => {
const theme = useTheme()
const { usesLocalAuth, toggleLocalAuth } = useAuth()
return (
<Box>
<Text variant="subheader" paddingHorizontal="m" paddingBottom="xs">
{i18n.t('settings.security')}
</Text>
<Paper>
<Box
flexDirection="row"
alignItems="center"
justifyContent="space-between"
>
<Box flexDirection="row">
<Ionicons
name="finger-print"
size={24}
color={theme.colors.icon}
style={{ paddingRight: theme.spacing.m }}
/>
<Text variant="subtitle">
{Platform.OS === 'ios' || Platform.OS === 'macos'
? i18n.t('settings.touchId')
: i18n.t('settings.fingerprint')}
</Text>
</Box>
<Switch value={usesLocalAuth} onValueChange={toggleLocalAuth} />
</Box>
</Paper>
</Box>
)
}
This is my whole screen that is shown in the image, which is a component of a StackNavigator Screen from #react-navigation/native-stack.
const Settings = ({
navigation,
}: {
navigation: NativeStackNavigationProp<SessionParamList, 'Settings'>
}) => {
const theme = useTheme()
return (
<ScrollView style={{ paddingVertical: theme.spacing.m }}>
<Profile
onPersonalPress={() => navigation.push('PersonalData')}
onResidencePress={() => navigation.push('Residence')}
onContactPress={() => navigation.push('ContactInformation')}
/>
<Preferences />
<Security />
</ScrollView>
)
}
export default Settings
This is the StackNavigator Screen which holds the Settings page.
const Stack = createNativeStackNavigator<SessionParamList>()
const Tab = createBottomTabNavigator()
function SettingsStack() {
return (
<Stack.Navigator>
<Stack.Screen
options={{
...stackOptions,
headerTitle: i18n.t('settings.settings'),
}}
name="Settings"
component={Settings}
/>
</Stack.Navigator>
)
}
My guess is that the Settings Stack.Screen gets removed for a small moment when the async toggleLocalAuth function is called. The background and Tabbar do not flicker because they are defined as screenOptions on my Tab.Navigator which sits above the Settings page in the component tree.
Edit:
I use useContext and createContext to gloablly manage the authentication state.
export type ContextType = {
isAuthenticated: boolean
usesLocalAuth: boolean
jwt: string
logout: () => void
login: (jwt: string) => void
toggleLocalAuth: () => void
}
const AuthContext = createContext<ContextType>({
isAuthenticated: false,
jwt: '',
usesLocalAuth: false,
logout: () => console.warn('Not Auth provider above component'),
login: () => console.warn('Not Auth provider above component'),
toggleLocalAuth: () => console.warn('Not Auth provider above component'),
})
export const useAuth = () => useContext(AuthContext)
These are the relevant excerpts of my App.tsx file:
export default function App() {
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false)
const [usesLocalAuth, setUsesLocalAuth] = useState<boolean>(false)
const [jwt, setJwt] = useState('')
function logout() {
setIsAuthenticated(false)
setDid(null)
}
function login(jwt: string) {
setIsAuthenticated(true)
setJwt(jwt)
}
const authProvider = useMemo(
() => ({
isAuthenticated: isAuthenticated,
jwt: jwt,
usesLocalAuth: usesLocalAuth,
logout: logout,
login: login,
toggleLocalAuth: toggleLocalAuth,
}),
[isAuthenticated, usesLocalAuth, did, jwt, logout, login, toggleLocalAuth],
...
return (
<AuthContext.Provider value={authProvider}>
...
</AuthContext.Provider>
)
)