From bce6c4fc3b316c8bfa08a7f69d09014f4f00119e Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Thu, 2 Jul 2020 15:47:19 +0200 Subject: [PATCH] chore: tweak types in the example --- example/src/Screens/AuthFlow.tsx | 18 +++++----- example/src/Screens/BottomTabs.tsx | 6 ++-- example/src/Screens/CompatAPI.tsx | 13 ++++---- example/src/Screens/LinkComponent.tsx | 29 ++++++---------- example/src/Screens/MasterDetail.tsx | 33 +++++++++++-------- example/src/Screens/MaterialTopTabs.tsx | 18 +++++----- .../src/Screens/ModalPresentationStack.tsx | 27 +++++++-------- example/src/Screens/NotFound.tsx | 6 ++-- example/src/Screens/PreventRemove.tsx | 8 +++-- example/src/Screens/SimpleStack.tsx | 8 +++-- .../src/Screens/StackHeaderCustomization.tsx | 30 +++++++---------- example/src/Screens/StackTransparent.tsx | 30 +++++++---------- example/src/index.tsx | 16 +++------ 13 files changed, 106 insertions(+), 136 deletions(-) diff --git a/example/src/Screens/AuthFlow.tsx b/example/src/Screens/AuthFlow.tsx index b1272b61..2117a27d 100644 --- a/example/src/Screens/AuthFlow.tsx +++ b/example/src/Screens/AuthFlow.tsx @@ -5,7 +5,7 @@ import { useTheme, ParamListBase } from '@react-navigation/native'; import { createStackNavigator, HeaderBackButton, - StackNavigationProp, + StackScreenProps, } from '@react-navigation/stack'; type AuthStackParams = { @@ -81,10 +81,6 @@ const HomeScreen = () => { const SimpleStack = createStackNavigator(); -type Props = { - navigation: StackNavigationProp; -}; - type State = { isLoading: boolean; isSignout: boolean; @@ -96,7 +92,9 @@ type Action = | { type: 'SIGN_IN'; token: string } | { type: 'SIGN_OUT' }; -export default function SimpleStackScreen({ navigation }: Props) { +export default function SimpleStackScreen({ + navigation, +}: StackScreenProps) { const [state, dispatch] = React.useReducer>( (prevState, action) => { switch (action.type) { @@ -135,9 +133,11 @@ export default function SimpleStackScreen({ navigation }: Props) { return () => clearTimeout(timer); }, []); - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); const authContext = React.useMemo( () => ({ diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx index e857d0f2..411757c9 100644 --- a/example/src/Screens/BottomTabs.tsx +++ b/example/src/Screens/BottomTabs.tsx @@ -9,7 +9,7 @@ import { import type { StackScreenProps } from '@react-navigation/stack'; import { createBottomTabNavigator, - BottomTabNavigationProp, + BottomTabScreenProps, } from '@react-navigation/bottom-tabs'; import TouchableBounce from '../Shared/TouchableBounce'; import Albums from '../Shared/Albums'; @@ -36,9 +36,7 @@ const scrollEnabled = Platform.select({ web: true, default: false }); const AlbumsScreen = ({ navigation, -}: { - navigation: BottomTabNavigationProp; -}) => { +}: BottomTabScreenProps) => { return ( diff --git a/example/src/Screens/CompatAPI.tsx b/example/src/Screens/CompatAPI.tsx index bb074542..c30e5920 100644 --- a/example/src/Screens/CompatAPI.tsx +++ b/example/src/Screens/CompatAPI.tsx @@ -8,6 +8,7 @@ import { import { createStackNavigator, StackNavigationProp, + StackScreenProps, } from '@react-navigation/stack'; import Article from '../Shared/Article'; import Albums from '../Shared/Albums'; @@ -143,12 +144,12 @@ const CompatStack = createCompatStackNavigator< export default function CompatStackScreen({ navigation, -}: { - navigation: StackNavigationProp<{}>; -}) { - navigation.setOptions({ - headerShown: false, - }); +}: StackScreenProps<{}>) { + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ; } diff --git a/example/src/Screens/LinkComponent.tsx b/example/src/Screens/LinkComponent.tsx index 7ab3853f..53bc6791 100644 --- a/example/src/Screens/LinkComponent.tsx +++ b/example/src/Screens/LinkComponent.tsx @@ -4,13 +4,12 @@ import { Button } from 'react-native-paper'; import { Link, StackActions, - RouteProp, ParamListBase, useLinkProps, } from '@react-navigation/native'; import { createStackNavigator, - StackNavigationProp, + StackScreenProps, } from '@react-navigation/stack'; import Article from '../Shared/Article'; import Albums from '../Shared/Albums'; @@ -20,8 +19,6 @@ type SimpleStackParams = { Albums: undefined; }; -type SimpleStackNavigation = StackNavigationProp; - const scrollEnabled = Platform.select({ web: true, default: false }); const LinkButton = ({ @@ -45,10 +42,7 @@ const LinkButton = ({ const ArticleScreen = ({ navigation, route, -}: { - navigation: SimpleStackNavigation; - route: RouteProp; -}) => { +}: StackScreenProps) => { return ( @@ -88,11 +82,7 @@ const ArticleScreen = ({ ); }; -const AlbumsScreen = ({ - navigation, -}: { - navigation: SimpleStackNavigation; -}) => { +const AlbumsScreen = ({ navigation }: StackScreenProps) => { return ( @@ -124,14 +114,15 @@ const AlbumsScreen = ({ const SimpleStack = createStackNavigator(); -type Props = Partial> & { - navigation: StackNavigationProp; -}; +type Props = Partial> & + StackScreenProps; export default function SimpleStackScreen({ navigation, ...rest }: Props) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ( diff --git a/example/src/Screens/MasterDetail.tsx b/example/src/Screens/MasterDetail.tsx index ec6e91b7..c4bb051c 100644 --- a/example/src/Screens/MasterDetail.tsx +++ b/example/src/Screens/MasterDetail.tsx @@ -8,12 +8,12 @@ import { } from '@react-navigation/native'; import { createDrawerNavigator, - DrawerNavigationProp, + DrawerScreenProps, DrawerContent, DrawerContentComponentProps, DrawerContentOptions, } from '@react-navigation/drawer'; -import type { StackNavigationProp } from '@react-navigation/stack'; +import type { StackScreenProps } from '@react-navigation/stack'; import Article from '../Shared/Article'; import Albums from '../Shared/Albums'; import NewsFeed from '../Shared/NewsFeed'; @@ -24,8 +24,6 @@ type DrawerParams = { Albums: undefined; }; -type DrawerNavigation = DrawerNavigationProp; - const useIsLargeScreen = () => { const [dimensions, setDimensions] = React.useState(Dimensions.get('window')); @@ -60,7 +58,9 @@ const Header = ({ ); }; -const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => { +const ArticleScreen = ({ + navigation, +}: DrawerScreenProps) => { return ( <>
navigation.toggleDrawer()} /> @@ -69,7 +69,9 @@ const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => { ); }; -const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => { +const NewsFeedScreen = ({ + navigation, +}: DrawerScreenProps) => { return ( <>
navigation.toggleDrawer()} /> @@ -78,7 +80,9 @@ const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => { ); }; -const AlbumsScreen = ({ navigation }: { navigation: DrawerNavigation }) => { +const AlbumsScreen = ({ + navigation, +}: DrawerScreenProps) => { return ( <>
navigation.toggleDrawer()} /> @@ -106,15 +110,16 @@ const CustomDrawerContent = ( const Drawer = createDrawerNavigator(); -type Props = Partial> & { - navigation: StackNavigationProp; -}; +type Props = Partial> & + StackScreenProps; export default function DrawerScreen({ navigation, ...rest }: Props) { - navigation.setOptions({ - headerShown: false, - gestureEnabled: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + gestureEnabled: false, + }); + }, [navigation]); const isLargeScreen = useIsLargeScreen(); diff --git a/example/src/Screens/MaterialTopTabs.tsx b/example/src/Screens/MaterialTopTabs.tsx index d328c886..9e7343a4 100644 --- a/example/src/Screens/MaterialTopTabs.tsx +++ b/example/src/Screens/MaterialTopTabs.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { ParamListBase } from '@react-navigation/native'; -import type { StackNavigationProp } from '@react-navigation/stack'; +import type { StackScreenProps } from '@react-navigation/stack'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import Albums from '../Shared/Albums'; import Contacts from '../Shared/Contacts'; @@ -14,14 +14,14 @@ type MaterialTopTabParams = { const MaterialTopTabs = createMaterialTopTabNavigator(); -type Props = { - navigation: StackNavigationProp; -}; - -export default function MaterialTopTabsScreen({ navigation }: Props) { - navigation.setOptions({ - cardStyle: { flex: 1 }, - }); +export default function MaterialTopTabsScreen({ + navigation, +}: StackScreenProps) { + React.useLayoutEffect(() => { + navigation.setOptions({ + cardStyle: { flex: 1 }, + }); + }, [navigation]); return ( diff --git a/example/src/Screens/ModalPresentationStack.tsx b/example/src/Screens/ModalPresentationStack.tsx index 10856ab4..988c1868 100644 --- a/example/src/Screens/ModalPresentationStack.tsx +++ b/example/src/Screens/ModalPresentationStack.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { View, StyleSheet, ScrollView, Platform } from 'react-native'; import { Button } from 'react-native-paper'; -import type { RouteProp, ParamListBase } from '@react-navigation/native'; +import type { ParamListBase } from '@react-navigation/native'; import { createStackNavigator, - StackNavigationProp, + StackScreenProps, + StackNavigationOptions, TransitionPresets, } from '@react-navigation/stack'; import Article from '../Shared/Article'; @@ -15,17 +16,12 @@ type ModalStackParams = { Albums: undefined; }; -type ModalStackNavigation = StackNavigationProp; - const scrollEnabled = Platform.select({ web: true, default: false }); const ArticleScreen = ({ navigation, route, -}: { - navigation: ModalStackNavigation; - route: RouteProp; -}) => { +}: StackScreenProps) => { return ( @@ -52,7 +48,7 @@ const ArticleScreen = ({ ); }; -const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => { +const AlbumsScreen = ({ navigation }: StackScreenProps) => { return ( @@ -78,15 +74,16 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => { const ModalPresentationStack = createStackNavigator(); -type Props = { - options?: React.ComponentProps; - navigation: StackNavigationProp; +type Props = StackScreenProps & { + options?: StackNavigationOptions; }; export default function SimpleStackScreen({ navigation, options }: Props) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ( ; -}) => { +}: StackScreenProps<{ Home: undefined }>) => { return ( 404 Not Found diff --git a/example/src/Screens/PreventRemove.tsx b/example/src/Screens/PreventRemove.tsx index 8e1a9e98..1490d978 100644 --- a/example/src/Screens/PreventRemove.tsx +++ b/example/src/Screens/PreventRemove.tsx @@ -134,9 +134,11 @@ const SimpleStack = createStackNavigator(); type Props = StackScreenProps; export default function SimpleStackScreen({ navigation }: Props) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ( diff --git a/example/src/Screens/SimpleStack.tsx b/example/src/Screens/SimpleStack.tsx index 010aeff9..744515e8 100644 --- a/example/src/Screens/SimpleStack.tsx +++ b/example/src/Screens/SimpleStack.tsx @@ -106,9 +106,11 @@ const SimpleStack = createStackNavigator(); export default function SimpleStackScreen({ navigation, }: StackScreenProps) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ( diff --git a/example/src/Screens/StackHeaderCustomization.tsx b/example/src/Screens/StackHeaderCustomization.tsx index 54334b0f..f1d2ab30 100644 --- a/example/src/Screens/StackHeaderCustomization.tsx +++ b/example/src/Screens/StackHeaderCustomization.tsx @@ -9,10 +9,10 @@ import { } from 'react-native'; import { Button, Appbar } from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import { useTheme, RouteProp, ParamListBase } from '@react-navigation/native'; +import { useTheme, ParamListBase } from '@react-navigation/native'; import { createStackNavigator, - StackNavigationProp, + StackScreenProps, HeaderBackground, useHeaderHeight, Header, @@ -27,17 +27,12 @@ type SimpleStackParams = { Albums: undefined; }; -type SimpleStackNavigation = StackNavigationProp; - const scrollEnabled = Platform.select({ web: true, default: false }); const ArticleScreen = ({ navigation, route, -}: { - navigation: SimpleStackNavigation; - route: RouteProp; -}) => { +}: StackScreenProps) => { return ( @@ -64,11 +59,7 @@ const ArticleScreen = ({ ); }; -const AlbumsScreen = ({ - navigation, -}: { - navigation: SimpleStackNavigation; -}) => { +const AlbumsScreen = ({ navigation }: StackScreenProps) => { const headerHeight = useHeaderHeight(); return ( @@ -96,9 +87,8 @@ const AlbumsScreen = ({ const SimpleStack = createStackNavigator(); -type Props = Partial> & { - navigation: StackNavigationProp; -}; +type Props = Partial> & + StackScreenProps; function CustomHeader(props: StackHeaderProps) { const { current, next } = props.scene.progress; @@ -120,9 +110,11 @@ function CustomHeader(props: StackHeaderProps) { } export default function SimpleStackScreen({ navigation, ...rest }: Props) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); const { colors, dark } = useTheme(); diff --git a/example/src/Screens/StackTransparent.tsx b/example/src/Screens/StackTransparent.tsx index ba1c94d0..64c0127a 100644 --- a/example/src/Screens/StackTransparent.tsx +++ b/example/src/Screens/StackTransparent.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { View, StyleSheet, ScrollView, Platform } from 'react-native'; import { Button, Paragraph } from 'react-native-paper'; -import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native'; +import { ParamListBase, useTheme } from '@react-navigation/native'; import { createStackNavigator, - StackNavigationProp, + StackScreenProps, } from '@react-navigation/stack'; import Article from '../Shared/Article'; @@ -13,17 +13,12 @@ type SimpleStackParams = { Dialog: undefined; }; -type SimpleStackNavigation = StackNavigationProp; - const scrollEnabled = Platform.select({ web: true, default: false }); const ArticleScreen = ({ navigation, route, -}: { - navigation: SimpleStackNavigation; - route: RouteProp; -}) => { +}: StackScreenProps) => { return ( @@ -50,11 +45,7 @@ const ArticleScreen = ({ ); }; -const DialogScreen = ({ - navigation, -}: { - navigation: SimpleStackNavigation; -}) => { +const DialogScreen = ({ navigation }: StackScreenProps) => { const { colors } = useTheme(); return ( @@ -81,14 +72,15 @@ const DialogScreen = ({ const SimpleStack = createStackNavigator(); -type Props = Partial> & { - navigation: StackNavigationProp; -}; +type Props = Partial> & + StackScreenProps; export default function SimpleStackScreen({ navigation, ...rest }: Props) { - navigation.setOptions({ - headerShown: false, - }); + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: false, + }); + }, [navigation]); return ( diff --git a/example/src/index.tsx b/example/src/index.tsx index 78ef9c3f..c6fb7569 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -31,11 +31,11 @@ import { } from '@react-navigation/native'; import { createDrawerNavigator, - DrawerNavigationProp, + DrawerScreenProps, } from '@react-navigation/drawer'; import { createStackNavigator, - StackNavigationProp, + StackScreenProps, HeaderStyleInterpolators, } from '@react-navigation/stack'; import { useReduxDevToolsExtension } from '@react-navigation/devtools'; @@ -288,11 +288,7 @@ export default function App() { ), }} > - {({ - navigation, - }: { - navigation: DrawerNavigationProp; - }) => ( + {({ navigation }: DrawerScreenProps) => ( - {({ - navigation, - }: { - navigation: StackNavigationProp; - }) => ( + {({ navigation }: StackScreenProps) => (