From 3ab98dfd2f04a6432167c848a3bb3f27c32b9afd Mon Sep 17 00:00:00 2001 From: Andreas Eriksson Date: Sun, 26 Sep 2021 10:30:13 +0200 Subject: [PATCH] Upgrade react-navigation to latest version 6 --- packages/app/components/absence.component.tsx | 4 +- packages/app/components/auth.component.tsx | 6 +- packages/app/components/child.component.tsx | 14 +-- .../app/components/children.component.tsx | 4 +- .../app/components/classmates.component.tsx | 8 +- .../app/components/contactMenu.component.tsx | 8 +- packages/app/components/library.component.tsx | 2 +- .../app/components/navigation.component.tsx | 18 +++- .../app/components/newsItem.component.tsx | 4 +- .../app/components/setLanguage.component.tsx | 2 +- .../app/components/settings.component.tsx | 2 +- .../settingsAppearance.component.tsx | 2 +- .../settingsAppearanceTheme.component.tsx | 2 +- .../components/settingsLicenses.component.tsx | 2 +- packages/app/design/navigationThemes.ts | 2 +- packages/app/package.json | 7 +- packages/app/yarn.lock | 86 +++++++++++-------- 17 files changed, 90 insertions(+), 83 deletions(-) diff --git a/packages/app/components/absence.component.tsx b/packages/app/components/absence.component.tsx index 4e3b901b..7e9ac52a 100644 --- a/packages/app/components/absence.component.tsx +++ b/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: () => ( { return { headerShown: false, - replaceAnimation: 'push', - stackAnimation: 'fade', + animationTypeForReplace: 'push', + animation: 'fade', } } diff --git a/packages/app/components/child.component.tsx b/packages/app/components/child.component.tsx index 3b87597b..2b37e36c 100644 --- a/packages/app/components/child.component.tsx +++ b/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 type ChildRouteProps = RouteProp export type ChildTabParamList = { @@ -34,11 +31,6 @@ export type ChildTabParamList = { Classmates: undefined } -interface TabTitleProps { - children: string - style?: StyleProp -} - const { Navigator, Screen } = createBottomTabNavigator() const NewsScreen = () => @@ -56,6 +48,7 @@ const TabNavigator = ({ initialRouteName={initialRouteName} screenOptions={({ route }) => { return { + headerShown: false, tabBarLabel: ({ focused }) => ( { case 'Classmates': return translate('navigation.classmates') } + return '' } export const childRouteOptions = @@ -139,7 +133,7 @@ export const childRouteOptions = return { ...defaultStackStyling(darkMode), - headerCenter: () => ( + headerTitle: () => ( { const renderItemIcon = (props: IconProps) => ( ) - const [selected, setSelected] = React.useState() + const [selected, setSelected] = React.useState() const renderItem = ({ item, index }: ListRenderItemInfo) => ( { description={guardians(item.guardians)} accessoryLeft={renderItemIcon} accessoryRight={() => ( - + )} /> ) diff --git a/packages/app/components/contactMenu.component.tsx b/packages/app/components/contactMenu.component.tsx index 059aa1a7..5a910308 100644 --- a/packages/app/components/contactMenu.component.tsx +++ b/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') diff --git a/packages/app/components/library.component.tsx b/packages/app/components/library.component.tsx index 5b6269e1..07b99dbf 100644 --- a/packages/app/components/library.component.tsx +++ b/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' diff --git a/packages/app/components/navigation.component.tsx b/packages/app/components/navigation.component.tsx index 25b01162..a1f30581 100644 --- a/packages/app/components/navigation.component.tsx +++ b/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() 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'], }, diff --git a/packages/app/components/newsItem.component.tsx b/packages/app/components/newsItem.component.tsx index 6a36573e..e8d5885d 100644 --- a/packages/app/components/newsItem.component.tsx +++ b/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: () => (