title: Type-safe navigationHandler with React-Navigation
body: <p>I have an issue with Typescript and React Navigation for my React Native app.
  I've got the following setup in my project, which gives me awesome help and autocompletion when using e.g. <code>navigation.push()</code>.</p>
  
  <p>Types</p>
  
  <pre><code>import { StackNavigationProp } from '@react-navigation/stack';
  
  export type RootStackParamList = {
      Home: undefined;
      Content: undefined;
      List: undefined;
  };
  
  export type StackNavigationProps = StackNavigationProp&lt;RootStackParamList&gt;;
  </code></pre>
  
  <p>Usage</p>
  
  <pre><code>const navigation = useNavigation&lt;StackNavigationProps&gt;();
  </code></pre>
  
  <p>However, I've created a navigation handler function that takes a parameter that gets fed to <code>navigation.push</code>. It works fine as long as the type of the parameter is of type <code>any</code>.</p>
  
  <pre><code>const navigationHandler = useCallback((targetScreen) =&gt; {
      navigation.push(targetScreen);
  }, [navigation]);
  </code></pre>
  
  <p>But I am not satisfied with the <code>any</code> type and would prefer that <code>targetScreen</code> could in fact just be one of the screens that were declared in my <code>RootStackParamList</code> type. I have tried in countless ways to satisfy the <code>push</code> method of the navigation object but I'm stuck.</p>
  
  <p>The following attempt has been the most successful but is yet not working exactly as it should. It does give me autocompletion on available screens, but the <code>push</code> is still unhappy.</p>
  
  <p>Type:</p>
  
  <pre><code>export type NavigationScreen&lt;T extends RootStackParamList&gt; = {
      [K in keyof T]: K;
  }[keyof T];
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>const navigationHandler = useCallback(
      &lt;T extends RootStackParamList&gt;(targetScreen: NavigationScreen&lt;T&gt;) =&gt; {
          navigation.push(targetScreen);
  },[navigation]);
  </code></pre>
  
  <p>Hovering the error I get prompted with the following:</p>
  
  <blockquote>
    <p>(parameter) targetScreen: { [K in keyof T]: K; }[keyof T] Argument of
    type '[{ [K in keyof T]: K; }[keyof T]]' is not assignable to
    parameter of type '["Home" | "Content" | "List"] | ["Home" | "Content"
    | "List", undefined]'.   Type '[{ [K in keyof T]: K; }[keyof T]]' is
    not assignable to type '["Home" | "Content" | "List"]'.<br>
        Type 'keyof T' is not assignable to type '"Home" | "Content" | "List"'.<br>
          Type 'string | number | symbol' is not assignable to type '"Home" | "Content" | "List"'.<br>
            Type 'string' is not assignable to type '"Home" | "Content" | "List"'.<br>
              Type 'keyof T' is not assignable to type '"List"'.<br>
                Type 'string | number | symbol' is not assignable to type '"List"'.<br>
                  Type 'string' is not assignable to type '"List"'.</p>
  </blockquote>
  
  <p>How to get this working?</p>