Merge pull request #441 from cultuurnet/feat/UIT-264-authentication-c…

…hange

uit-264: android navigation bar and authenticated logic

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.3-3",
   "private": true,
   "scripts": {
-    "android": "react-native run-android --variant=debug --appIdSuffix=debug",
+    "android": "react-native run-android --mode=beta --appIdSuffix=beta",
     "check-types": "tsc --noEmit",
     "format:check": "yarn prettier --check",
     "format": "yarn prettier --write",
@@ -61,6 +61,7 @@
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.29.0",
     "react-native-svg": "^13.6.0",
+    "react-native-system-navigation-bar": "^2.6.4",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-vision-camera": "^4.5.0",
     "styled-components": "^5.3.11"

src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { LogBox, StatusBar } from 'react-native';
 import { getLocales } from 'react-native-localize';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SystemNavigationBar from 'react-native-system-navigation-bar';
 import { useFlipper } from '@react-navigation/devtools';
 import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
 import { ThemeProvider } from 'styled-components/native';
@@ -25,6 +26,7 @@ const App = () => {
 
   useEffect(() => {
     storage.set(StorageKey.Language, getLocales()[0].languageCode);
+    SystemNavigationBar.setNavigationColor(theme.palette.neutral['0']);
   }, []);
 
   return (

src/_context/AuthenticationContext.tsx

@@ -48,6 +48,7 @@ const AuthenticationProvider: FC<PropsWithChildren> = ({ children }) => {
     try {
       await client.credentialsManager.clearCredentials();
       await client.webAuth.clearSession();
+      setIsAuthenticated(false);
 
       // Clear react query cache
       const queryCache = new QueryCache({});
@@ -58,7 +59,6 @@ const AuthenticationProvider: FC<PropsWithChildren> = ({ children }) => {
       // Reset state
       setAccessToken(undefined);
       setUser(undefined);
-      setIsAuthenticated(false);
     } catch (e) {
       log.error(e);
     }

src/profile/LogOutModal.tsx

@@ -32,8 +32,20 @@ const LogoutModal: FC<TLogOutModalProps> = ({ isVisible, toggleIsVisible }) => {
         {t('AUTHENTICATION.CONFIRM_TEXT')}
       </Typography>
       <Styled.ButtonContainer>
-        <Styled.ActionButton label={t('AUTHENTICATION.CANCEL')} onPress={toggleIsVisible} underline={false} variant="link" />
-        <Styled.ActionButton label={t('AUTHENTICATION.CONFIRM')} onPress={handleLogout} underline={false} variant="link" />
+        <Styled.ActionButton
+          hitSlop={25}
+          label={t('AUTHENTICATION.CANCEL')}
+          onPress={toggleIsVisible}
+          underline={false}
+          variant="link"
+        />
+        <Styled.ActionButton
+          hitSlop={25}
+          label={t('AUTHENTICATION.CONFIRM')}
+          onPress={handleLogout}
+          underline={false}
+          variant="link"
+        />
       </Styled.ButtonContainer>
     </BlurredModal>
   );

yarn.lock

@@ -7724,6 +7724,11 @@ react-native-svg@^13.6.0:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
+react-native-system-navigation-bar@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/react-native-system-navigation-bar/-/react-native-system-navigation-bar-2.6.4.tgz#34edee7051dea01531ff2be95dc14f9fa8a540b7"
+  integrity sha512-4pysgADW53PiuHv+2glzNLJnHSxqDszZvLoitLFI5os4D+gCDfxmR36VSET4EnXkzSf8X9mbeFkHYDypDHJyZA==
+
 react-native-url-polyfill@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz#c1763de0f2a8c22cc3e959b654c8790622b6ef6a"