Upgrade react-navigation to latest version 6

packages/app/components/absence.component.tsx

@@ -13,7 +13,7 @@ import Personnummer from 'personnummer'
 import React, { useCallback } from 'react'
 import { View } from 'react-native'
 import DateTimePickerModal from 'react-native-modal-datetime-picker'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import * as Yup from 'yup'
 import { defaultStackStyling } from '../design/navigationThemes'
 import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
@@ -47,7 +47,7 @@ export const absenceRouteOptions =
     const child = route.params.child
     return {
       ...defaultStackStyling(darkMode),
-      headerCenter: () => (
+      headerTitle: () => (
         <NavigationTitle
           title={translate('abscense.title')}
           subtitle={studentName(child?.name)}

packages/app/components/auth.component.tsx

@@ -14,7 +14,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { useTranslation } from '../hooks/useTranslation'
 import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
 import { fontSize } from '../styles/typography'
@@ -44,8 +44,8 @@ interface AuthProps {
 export const authRouteOptions = (): NativeStackNavigationOptions => {
   return {
     headerShown: false,
-    replaceAnimation: 'push',
-    stackAnimation: 'fade',
+    animationTypeForReplace: 'push',
+    animation: 'fade',
   }
 }
 

packages/app/components/child.component.tsx

@@ -5,11 +5,9 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
 import { Icon } from '@ui-kitten/components'
 import React, { useEffect } from 'react'
-import { StyleProp, TextProps } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { defaultStackStyling } from '../design/navigationThemes'
 import { studentName } from '../utils/peopleHelpers'
 import { translate } from '../utils/translation'
@@ -23,7 +21,6 @@ import { NotificationsList } from './notificationsList.component'
 import { Classmates } from './classmates.component'
 import { TabBarLabel } from './tabBarLabel.component'
 
-type ChildNavigationProp = StackNavigationProp<RootStackParamList, 'Child'>
 type ChildRouteProps = RouteProp<RootStackParamList, 'Child'>
 
 export type ChildTabParamList = {
@@ -34,11 +31,6 @@ export type ChildTabParamList = {
   Classmates: undefined
 }
 
-interface TabTitleProps {
-  children: string
-  style?: StyleProp<TextProps>
-}
-
 const { Navigator, Screen } = createBottomTabNavigator<ChildTabParamList>()
 
 const NewsScreen = () => <NewsList />
@@ -56,6 +48,7 @@ const TabNavigator = ({
     initialRouteName={initialRouteName}
     screenOptions={({ route }) => {
       return {
+        headerShown: false,
         tabBarLabel: ({ focused }) => (
           <TabBarLabel
             label={getRouteTitleFromName(route.name)}
@@ -126,6 +119,7 @@ const getRouteTitleFromName = (routeName: string) => {
     case 'Classmates':
       return translate('navigation.classmates')
   }
+  return ''
 }
 
 export const childRouteOptions =
@@ -139,7 +133,7 @@ export const childRouteOptions =
 
     return {
       ...defaultStackStyling(darkMode),
-      headerCenter: () => (
+      headerTitle: () => (
         <NavigationTitle
           title={getHeaderTitle(route)}
           subtitle={studentName(child?.name)}

packages/app/components/children.component.tsx

@@ -18,7 +18,7 @@ import {
   ListRenderItemInfo,
   View,
 } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { defaultStackStyling } from '../design/navigationThemes'
 import AppStorage from '../services/appStorage'
 import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
@@ -34,7 +34,7 @@ export const childenRouteOptions =
       ...defaultStackStyling(darkMode),
       title: translate('children.title'),
       headerLargeTitle: true,
-      headerLargeTitleHideShadow: true,
+      headerLargeTitleShadowVisible: false,
     }
   }
 

packages/app/components/classmates.component.tsx

@@ -26,7 +26,7 @@ export const Classmates = () => {
   const renderItemIcon = (props: IconProps) => (
     <Icon {...props} name="people-outline" />
   )
-  const [selected, setSelected] = React.useState()
+  const [selected, setSelected] = React.useState<Classmate>()
   const renderItem = ({ item, index }: ListRenderItemInfo<Classmate>) => (
     <ListItem
       accessibilityLabel={`${translate('classmates.child')} ${index + 1}`}
@@ -38,11 +38,7 @@ export const Classmates = () => {
       description={guardians(item.guardians)}
       accessoryLeft={renderItemIcon}
       accessoryRight={() => (
-        <ContactMenu
-          contact={item}
-          selected={item === selected}
-          setSelected={setSelected}
-        />
+        <ContactMenu contact={item} selected={item === selected} />
       )}
     />
   )

packages/app/components/contactMenu.component.tsx

@@ -21,14 +21,9 @@ import { translate } from '../utils/translation'
 interface ContactMenuProps {
   contact: Classmate
   selected: boolean
-  setSelected: (value?: number | null) => void
 }
 
-export const ContactMenu = ({
-  contact,
-  selected,
-  setSelected,
-}: ContactMenuProps) => {
+export const ContactMenu = ({ contact, selected }: ContactMenuProps) => {
   const [visible, setVisible] = React.useState(selected)
 
   const renderToggleButton = () => (
@@ -54,7 +49,6 @@ export const ContactMenu = ({
 
   const handleBackdropPress = () => {
     setVisible(false)
-    setSelected(null)
   }
 
   const shouldDisplay = (option?: string) => (option ? 'flex' : 'none')

packages/app/components/library.component.tsx

@@ -3,7 +3,7 @@ import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
 import React from 'react'
 import { Linking, Platform } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { Layout, Sizing, Typography } from '../styles'
 import { fontSize } from '../styles/typography'
 import { RootStackParamList } from './navigation.component'

packages/app/components/navigation.component.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@ui-kitten/components'
 import { Library } from 'libraries.json'
 import React, { useEffect } from 'react'
 import { StatusBar, useColorScheme } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { schema } from '../app.json'
 import {
   darkNavigationTheme,
@@ -42,9 +42,9 @@ import {
 } from './settingsLicenses.component'
 
 export type RootStackParamList = {
-  Login: undefined
+  Login: { rand: number }
   Children: undefined
-  Settings: undefined
+  Settings: { rand: number } | undefined
   SettingsAppearance: undefined
   SettingsAppearanceTheme: undefined
   SettingsLicenses: undefined
@@ -61,6 +61,17 @@ export type RootStackParamList = {
   SetLanguage: undefined
 }
 
+/**
+ * This is for supporting useNavigation, Link, ref etc
+ * without the type annotation
+ * https://reactnavigation.org/docs/typescript#specifying-default-types-for-usenavigation-link-ref-etc
+ */
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}
+
 const { Navigator, Screen } = createNativeStackNavigator<RootStackParamList>()
 
 const linking = {
@@ -121,6 +132,7 @@ export const AppNavigator = () => {
                 ? colors['background-basic-color-2']
                 : colors['background-basic-color-1'],
           },
+          headerTitleAlign: 'center',
           headerLargeStyle: {
             backgroundColor: colors['background-basic-color-2'],
           },

packages/app/components/newsItem.component.tsx

@@ -6,7 +6,7 @@ import moment from 'moment'
 import 'moment/locale/sv'
 import React from 'react'
 import { ScrollView, View } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { defaultStackStyling } from '../design/navigationThemes'
 import { Layout, Sizing, Typography } from '../styles'
 import { studentName } from '../utils/peopleHelpers'
@@ -37,7 +37,7 @@ export const newsItemRouteOptions =
     const { child } = route.params
     return {
       ...defaultStackStyling(darkMode),
-      headerCenter: () => (
+      headerTitle: () => (
         <NavigationTitle
           title={newsItem.header}
           subtitle={studentName(child?.name)}

packages/app/components/setLanguage.component.tsx

@@ -10,7 +10,7 @@ import { View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import RNRestart from 'react-native-restart'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { useLanguage } from '../hooks/useLanguage'
 import { isRTL, LanguageService } from '../services/languageService'
 import { Layout as LayoutStyle, Sizing } from '../styles'

packages/app/components/settings.component.tsx

@@ -2,7 +2,7 @@ import { NavigationProp, useNavigation } from '@react-navigation/core'
 import { useApi } from '@skolplattformen/api-hooks'
 import React, { useCallback } from 'react'
 import { ScrollView } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import useSettingsStorage from '../hooks/useSettingsStorage'
 import AppStorage from '../services/appStorage'
 import { LanguageService } from '../services/languageService'

packages/app/components/settingsAppearance.component.tsx

@@ -1,7 +1,7 @@
 import { NavigationProp, useNavigation } from '@react-navigation/core'
 import React from 'react'
 import { ScrollView, StyleSheet, Switch } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import useSettingsStorage from '../hooks/useSettingsStorage'
 import { Layout as LayoutStyle, Sizing } from '../styles'
 import { translate } from '../utils/translation'

packages/app/components/settingsAppearanceTheme.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import useSettingsStorage from '../hooks/useSettingsStorage'
 import { Layout as LayoutStyle, Sizing } from '../styles'
 import { translate } from '../utils/translation'

packages/app/components/settingsLicenses.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import libraries from '../libraries.json'
 import { translate } from '../utils/translation'
 import { LibraryList } from './libraryList.component'

packages/app/design/navigationThemes.ts

@@ -1,5 +1,5 @@
 import { DarkTheme, DefaultTheme, Theme } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { darkTheme, lightTheme } from './themes'
 
 export const darkNavigationTheme: Theme = {

packages/app/package.json

@@ -23,9 +23,10 @@
     "@react-native-community/cookies": "5.0.1",
     "@react-native-community/datetimepicker": "3.4.3",
     "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/bottom-tabs": "5.11.9",
-    "@react-navigation/native": "5.9.8",
-    "@react-navigation/stack": "5.14.4",
+    "@react-navigation/bottom-tabs": "6.0.5",
+    "@react-navigation/native": "6.0.2",
+    "@react-navigation/native-stack": "6.1.0",
+    "@react-navigation/stack": "6.0.7",
     "@skolplattformen/api-hooks": "3.0.0",
     "@skolplattformen/curriculum": "1.4.2",
     "@skolplattformen/embedded-api": "5.4.0",

packages/app/yarn.lock

@@ -1251,48 +1251,63 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-1.0.0.tgz#05bb0031533598f9458cf65a502b8df0eecae780"
   integrity sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==
 
-"@react-navigation/bottom-tabs@5.11.9":
-  version "5.11.9"
-  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.9.tgz#380a97593290a8e278365c5e4d84813e19c8a9c9"
-  integrity sha512-RuSlULJrEiSCDLTi3OfmXqfmBm+Y0G4JnGiCUguMDet+x5AXdYhrsLdxJVyBsnoQz3lvlz9pWIcQ8p/hPiv2CA==
+"@react-navigation/bottom-tabs@6.0.5":
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.5.tgz#ece601449054bf555d4f5b2cc00f7a20eb6f557a"
+  integrity sha512-GytjJUzacHhe3C24HFrPl881Donrw2m+3JBNqMJALxMRjSA8yY72+l16bZR9YFsrywSHVSbjxIfzqtGb8rIVJg==
   dependencies:
+    "@react-navigation/elements" "^1.1.0"
     color "^3.1.3"
-    react-native-iphone-x-helper "^1.3.0"
+    warn-once "^0.1.0"
 
-"@react-navigation/core@^5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.16.1.tgz#e0d308bd9bbd930114ce55c4151806b6d7907f69"
-  integrity sha512-3AToC7vPNeSNcHFLd1h71L6u34hfXoRAS1CxF9Fc4uC8uOrVqcNvphpeFbE0O9Bw6Zpl0BnMFl7E5gaL3KGzNA==
+"@react-navigation/core@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.0.1.tgz#4424ee1f83e2e305ef80d27c2778fb82fba852a0"
+  integrity sha512-mVdvBDYdz8uzLQHokmVdX/xC4rS7NIkD1FN/yaGdovVzYApAhM+UGd3w1zskjyCSyXaVHHOwV59ZGVew+84xfQ==
   dependencies:
-    "@react-navigation/routers" "^5.7.4"
+    "@react-navigation/routers" "^6.0.1"
     escape-string-regexp "^4.0.0"
-    nanoid "^3.1.15"
-    query-string "^6.13.6"
+    nanoid "^3.1.23"
+    query-string "^7.0.0"
     react-is "^16.13.0"
 
-"@react-navigation/native@5.9.8":
-  version "5.9.8"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.8.tgz#ac76ee6390ea7ce807486ca5c38d903e23433a97"
-  integrity sha512-DNbcDHXQPSFDLn51kkVVJjT3V7jJy2GztNYZe/2bEg29mi5QEcHHcpifjMCtyFKntAOWzKlG88UicIQ17UEghg==
+"@react-navigation/elements@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.1.0.tgz#483155ccf5a8f18d015db283bed34cc2255e2e9e"
+  integrity sha512-jZncciZPGuoP6B6f+Wpf6MYSSYy86B2HJDbFTCtT5xZV0w6V9GgCeqvSTOEAxifZrmKl8uDxsr0GrIxgQE8NxA==
+
+"@react-navigation/native-stack@6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.1.0.tgz#32e50d07bc8d9669d65f72dc4ffec2a6cc9ef379"
+  integrity sha512-ta8JQ9n6e7pxrXJ9/MYH57g0xhlV8rzGvQtni6KvBdWqqk0M5QDqIXaUkzXp2wvLMZp7LQmnD4FI/TGG2mQOKA==
   dependencies:
-    "@react-navigation/core" "^5.16.1"
+    "@react-navigation/elements" "^1.1.0"
+    warn-once "^0.1.0"
+
+"@react-navigation/native@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.2.tgz#6bdb3cfafb6a9cfb603c1555dd61faafca35b7c2"
+  integrity sha512-HDqEwgvQ4Cu16vz8jQ55lfyNK9CGbECI1wM9cPOcUa+gkOQEDZ/95VFfFjGGflXZs3ybPvGXlMC4ZAyh1CcO6w==
+  dependencies:
+    "@react-navigation/core" "^6.0.1"
     escape-string-regexp "^4.0.0"
-    nanoid "^3.1.15"
+    nanoid "^3.1.23"
 
-"@react-navigation/routers@^5.7.4":
-  version "5.7.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.7.4.tgz#8b5460e841a0c64f6c9a5fbc2a1eb832432d4fb0"
-  integrity sha512-0N202XAqsU/FlE53Nmh6GHyMtGm7g6TeC93mrFAFJOqGRKznT0/ail+cYlU6tNcPA9AHzZu1Modw1eoDINSliQ==
+"@react-navigation/routers@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.0.1.tgz#ae50f07c776c18bd9fdc87f17e9f3afc3fd59d19"
+  integrity sha512-5ctB49rmtTRQuTSBVgqMsEzBUjPP2ByUzBjNivA7jmvk+PDCl4oZsiR8KAm/twhxe215GYThfi2vUWXKAg6EEQ==
   dependencies:
-    nanoid "^3.1.15"
+    nanoid "^3.1.23"
 
-"@react-navigation/stack@5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.4.tgz#32f6717c03494f0ca6cf0dd43d8302af824de9e9"
-  integrity sha512-gQjWK8JHtVkD1p7wzjtSPuScJI0mSAk/N/gzgjQZo+rDUwgM8rOTDcVNRbtEOqCEgLQcZrZQHwhOjkrJirehjQ==
+"@react-navigation/stack@6.0.7":
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.0.7.tgz#305e66129d0b425802bb6ed4f24dbd2fb56ab74f"
+  integrity sha512-hxwhRZbn6zD2rInhItBeHTCPYzmurz+/8/MhtRevBEdLG0+61dik8Y+evg/mu6AsOU0WrDakTsLcHdf/9zkXzw==
   dependencies:
+    "@react-navigation/elements" "^1.1.0"
     color "^3.1.3"
-    react-native-iphone-x-helper "^1.3.0"
+    warn-once "^0.1.0"
 
 "@sideway/address@^4.1.0":
   version "4.1.2"
@@ -6027,7 +6042,7 @@ nanoid@3.1.20:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
   integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
 
-nanoid@^3.1.15:
+nanoid@^3.1.23:
   version "3.1.25"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
   integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
@@ -6747,10 +6762,10 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@^6.13.6:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
-  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
+query-string@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.1.tgz#45bd149cf586aaa582dffc7ec7a8ad97dd02f75d"
+  integrity sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==
   dependencies:
     decode-uri-component "^0.2.0"
     filter-obj "^1.1.0"
@@ -6873,11 +6888,6 @@ react-native-gesture-handler@^1.10.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-iphone-x-helper@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
-  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
-
 react-native-localize@^2.0.2:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-2.1.4.tgz#d4a41d9e03908c739e436dba9499b9e761b4e2f6"