react-navigation / react-navigation/react-navigation.github.io

The documentation on type scripting nested navigation is unclear

Ouverte
#960 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
JavaScript
Étoiles
324
Forks
2k
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

Current Behavior

  • What code are you running and what is happening?
  • Include a screenshot or video if it makes sense.
    I'm trying to setup typescript for navigating into a nested navigator. From reading the doc, this was my attempt (which I'm assuming is wrong. It gives me ''Create Conversation modal'' is referenced directly or indirectly in its own type annotation.ts(2502.
export type RootStackParamList = {
  Home: undefined;
  SignInUpTunnel: undefined;
  'Create Conversation modal': NavigatorScreenParams<EditConversationModalNavigatorParamList>;    <==== typescript error here
};

...
    return 
      <AuthenticatedUserProvider>
        <Stack.Navigator screenOptions={{ headerShown: false }} mode="modal">
          <Stack.Screen name="Home" component={HomeDrawerNavigator} />
          <Stack.Screen name="Create Conversation modal" component={EditConversationModalNavigator} />
        </Stack.Navigator>
      </AuthenticatedUserProvider>

...

export type EditConversationModalNavigatorParamList = RootStackParamList & {
  'Create conversation': { userToInvite: UserConversationStatusCellData | null };
};

...

      navigation.navigate('Create Conversation modal', { screen: 'Create conversation', params: { userToInvite } });

Unfortunately, the documentation on this topic is very thin: https://reactnavigation.org/docs/typescript#type-checking-screens-and-params-in-nested-navigator.
Also, the documentation uses a different navigation structure than the documentation for nesting navigators. making it hard to know where to actually put the NavigatorScreenParams and what paramList to give it.

Expected Behavior

I would expect the documentation for the typescripting of a nested navigator to include a full example (with the root navigator and nested navigator) and I would expect it to use the same navigators as the documentation to nest navigator.

How to reproduce

  • You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
  • Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
  • Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
  • Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
  • Before reporting an issue, make sure you are on the latest version of the package.

Your Environment

software version
typescript 4.0.7
@react-navigation/native 5.9.3
react-native
expo 40
node 14.6.0
npm or yarn 1.22.10

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la page TypeScript sur la navigation imbriquée et par la documentation distincte sur l’imbrication des navigateurs liée dans l’issue. Comparez leurs structures de navigateurs et utilisez RootStackParamList et EditConversationModalNavigatorParamList indiqués comme contexte d’exemple. Le travail est terminé lorsque la page TypeScript contient un exemple complet et correspondant d’un navigateur racine et d’un navigateur imbriqué, qui explique où placer NavigatorScreenParams.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
documentation
Type d'issue
Documentation
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.