Cleaner way to handle Navigation in Typescript in React Native-CodePudding

Anyone here who knows a cleaner way then ´{ navigation }:{navigation: NativeStackNavigationProp}` in Typescript in a React Native cli project? I already tried many different things from stackoverflow but they didn't work.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator, NativeStackNavigationProp} from '@react-navigation/native-stack';
import {Button, Text} from "react-native";

const Stack = createNativeStackNavigator();

export const App = () => {
    return (
        <MyStack/>
    );
};

const MyStack = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{ title: 'Welcome' }}
                />
                <Stack.Screen name="Profile" component={ProfileScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

const HomeScreen = ({ navigation }:{navigation: NativeStackNavigationProp<any>}) => {
    return (
        <Button
            title="Go to Jane's profile"
            onPress={() =>
                navigation.navigate('Profile', { name: 'Jane' })
            }
        />
    );
};
const ProfileScreen = ({ navigation, route }:{navigation: NativeStackNavigationProp<any>, route: any}) => {
    return <Text>This is {route.params.name}'s profile!</Text>;
};

CodePudding user response：

One way to clean up the code slightly would be to use a type assertion instead of destructuring the navigation property and explicitly defining its type. For example, you could change the following code:

From this:

const HomeScreen = ({ navigation }:{navigation: NativeStackNavigationProp<any>}) => {
    // code
};

To this:

const HomeScreen = (props: any) => {
    const navigation = props.navigation as NativeStackNavigationProp<any>;
    // code
};

Or, you can define a custom type:

type HomeScreenProps = {
  navigation: NativeStackNavigationProp<any>;
};

And use it as:

const HomeScreen = ({ navigation }: HomeScreenProps) => {
  // code
};

CodePudding user response：

Note : Please note that you need to use React.FC to type check your functional components.

If you refer to React Navigation's guide you will see that the correct way of type checking your navigation is:

Type check your stack first

type RootStackParamList = {
  Home: { title: string };
  Profile: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

Type check your screens

type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;


const HomeScreen:React.FC<{navigation:Props['navigation']}> = ({ navigation }) => {
  // code
}

    type Props = NativeStackScreenProps<RootStackParamList, 'Home'>
    
    const HomeScreen = () => {
          // code
          const navigation = useNavigation<Props['navigation']>()

}

You can use either of the two ways, I always use the hook, since it feels more clean to me.