title: Annotating React Navigation with TypeScript
body: <p>The current structure of my application has a stack navigator nested inside a tab navigator. I'm following <a href="https://reactnavigation.org/docs/typescript/" rel="nofollow noreferrer">React Navigation guide</a> on how to annotate the props.</p>
  <ol>
  <li>Helper type</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>**
   * Tabs in the app
   */
  export type TabParamList = {
    ChatTab: undefined;
    HomeTab: undefined;
    CalendarTab: undefined;
  };
  
  /**
   * Screens inside home tab
   */
  export type HomeStackParamList = {
    Home: undefined;
  };
  
  /**
   * Screens inside chat tab
   */
  export type ChatStackParamList = {
    Chat: undefined;
    Voice: undefined;
  };
  
  /**
   * Screens inside authentication
   */
  export type AuthenticationStackParamList = {
    Welcome: undefined;
    Login: undefined;
    Signup: undefined;
  };
  
  export type ComposeNavigator&lt;
    T extends keyof TabParamList,
    P extends ParamListBase,
    S extends keyof P
  &gt; = CompositeScreenProps&lt;
    BottomTabScreenProps&lt;TabParamList, T&gt;,
    StackScreenProps&lt;P, S&gt;
  &gt;;
  </code></pre>
  <ol start="2">
  <li>Usage</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>type NavigatorProps = ComposeNavigator&lt;&quot;ChatTab&quot;, ChatStackParamList, &quot;Voice&quot;&gt;;
  type Props = NavigatorProps;
  
  const VoiceScreen = ({ navigation }: Props) =&gt; {
   return &lt;&gt;&lt;/&gt;
  }
  </code></pre>
  <ol start="3">
  <li>I'm now running into type errors for createStackNavigation. Following the compiler error, I extended ComposeNavigator to have <code>{children?: React.ReactNode}</code> but it doesn't seem to solve the problem. Any help would be appreciated. Thanks!</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>const ChatNavigator = () =&gt; {
    const { screenOptions } = useDefaultHeaderStyle();
  
    /** @TODO component prop has type error */
    return (
      &lt;Stack.Navigator initialRouteName=&quot;Chat&quot; screenOptions={screenOptions}&gt;
        &lt;Stack.Screen name=&quot;Chat&quot; component={ChatScreen} /&gt;
        &lt;Stack.Screen name=&quot;Voice&quot; component={VoiceScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  };
  </code></pre>
  <ol start="4">
  <li>Dependencies</li>
  </ol>
  <pre><code>&quot;@react-navigation/bottom-tabs&quot;: &quot;^6.3.2&quot;,
  &quot;@react-navigation/native&quot;: &quot;^6.0.12&quot;,
  &quot;@react-navigation/stack&quot;: &quot;^6.2.3&quot;,
  </code></pre>