Passing parameters to routes

Passing params

navigation.navigate('ScreenName', params)

Read params

const DetailedScreen = ({ route }) => {
  const {} = route.params
}

Update params

navigation.setParams(params) // update param state of the current screen

Initial params

<Stack.Screen initialParams={params} />

Passing params to a previous screen

navigation.navigate('Previous Screen', params)

Type checking

screen param mapping data

type RootStackParamList = {
  Home: {}
  Profile: {}
  Setting: {} | undefined // optional param
}

pass type into createNavigator function ⇒ Type checking for Navigator and Screen components

const RootStack = createStackNavigator<RootStackParamList>()

Type checking screen props - navigation props and route prop

import type { NativeStackScreenProps } from '@react-navigation/native-stack'

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>

or we can do this.

import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
import type { RouteProp } from '@react-navigation/native'

type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>

Type checking for hooks

const navigation = useNavigation<ProfileScreenNavigationProp>()
const route = useRoute<ProfileScreenRouteProp>()