feat: 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",