Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript question relating to React Native / Stack Navigator

$
0
0

This is mostly a typescript question but it would help to have some knowledge of the @react-navigation/stack package.

Below is an example of what I am trying to achieve.

Basically, I would like to extract the function parameters of the navigate function from StackScreenProps and use them in a route param while maintaining type safety.

/** * this is the type that I need help with**/ type Redirect<ParamList extends ParamListBase> = Parameters<StackScreenProps<ParamList>['navigation']['navigate']>type RootStackParams = {  Login: {    redirect: Redirect<RootStackParams>  }  Post: {    postId: string  }}const Stack = createStackNavigator<RootStackParams>()const RootStack: FC = () => (<Stack.Navigator><Stack.Screen      component={Login}      name='Login'    /><Stack.Screen      component={Post}      name='Post'    /></Stack.Navigator>)type LoginScreenProps = StackScreenProps<RootStackParams, 'Login'>const LoginScreen: FC<LoginScreenProps> = (props) => {   const { navigation, route } = props   const { redirect } = route.params   const afterLogin = useCallback(() => {      /**      * here is where the issue is happening, the type for the `redirect` param does      * not satisfy the requirements for the `navigation.navigate` method      */      navigation.navigate(...redirect)   }, [redirect])}type PostScreenProps = StackScreenProps<RootStackParams, 'Post'>const PostScreen: FC<PostScreenProps> = ({ navigation, route }) => {  const { postId } = route.params  if (!auth.isNotLoggedIn) {    navigtation.navigate('Login',       /**       * also need the type to work here      **/      { redirect: ['Post', { postId }]     })  }}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>