fix: fix types for stack navigator

react-navigation · Sep 21, 2019 · de3c4ab · de3c4ab
1 parent 8dd4a8c
commit de3c4ab
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 30 deletions.
diff --git a/packages/example/src/Screens/NativeStack.tsx b/packages/example/src/Screens/NativeStack.tsx
@@ -2,26 +2,28 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/core';
+import { StackNavigationProp } from '@react-navigation/stack';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
+  NativeStackNavigationOptions,
 } from '@react-navigation/native-stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
-type SimpleStackParams = {
+type NativeStackParams = {
   article: { author: string };
   album: undefined;
 };
 
-type SimpleStackNavigation = NativeStackNavigationProp<SimpleStackParams>;
+type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
 }: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'article'>;
+  navigation: NativeStackNavigation;
+  route: RouteProp<NativeStackParams, 'article'>;
 }) => (
   <React.Fragment>
     <View style={styles.buttons}>
@@ -47,7 +49,7 @@ const ArticleScreen = ({
 const AlbumsScreen = ({
   navigation,
 }: {
-  navigation: SimpleStackNavigation;
+  navigation: NativeStackNavigation;
 }) => (
   <React.Fragment>
     <View style={styles.buttons}>
@@ -70,34 +72,37 @@ const AlbumsScreen = ({
   </React.Fragment>
 );
 
-const SimpleStack = createNativeStackNavigator<SimpleStackParams>();
+const NativeStack = createNativeStackNavigator<NativeStackParams>();
 
 type Props = {
-  options?: React.ComponentProps<typeof SimpleStack.Navigator>;
-  navigation: NativeStackNavigationProp<ParamListBase>;
+  options?: NativeStackNavigationOptions;
+  navigation: StackNavigationProp<ParamListBase>;
 };
 
-export default function SimpleStackScreen({ navigation, options }: Props) {
+export default function NativeStackScreen({ navigation, options }: Props) {
   navigation.setOptions({
-    headerTransparent: false,
+    header: null,
   });
 
   return (
-    <SimpleStack.Navigator {...options}>
-      <SimpleStack.Screen
+    <NativeStack.Navigator
+      {...options}
+      screenOptions={{ headerTransparent: false }}
+    >
+      <NativeStack.Screen
         name="article"
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params.author}`,
         })}
         initialParams={{ author: 'Gandalf' }}
       />
-      <SimpleStack.Screen
+      <NativeStack.Screen
         name="album"
         component={AlbumsScreen}
         options={{ title: 'Album', largeTitle: true }}
       />
-    </SimpleStack.Navigator>
+    </NativeStack.Navigator>
   );
 }
 

diff --git a/packages/example/src/Screens/SimpleStack.tsx b/packages/example/src/Screens/SimpleStack.tsx
@@ -5,6 +5,7 @@ import { RouteProp, ParamListBase } from '@react-navigation/core';
 import {
   createStackNavigator,
   StackNavigationProp,
+  StackNavigationOptions,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -73,7 +74,7 @@ const AlbumsScreen = ({
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
 type Props = {
-  options?: React.ComponentProps<typeof SimpleStack.Navigator>;
+  options?: StackNavigationOptions;
   navigation: StackNavigationProp<ParamListBase>;
 };
 

diff --git a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
@@ -31,19 +31,19 @@ import {
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
 import {
-  Props,
-  StackDescriptor,
+  NativeStacknavigatorProps,
+  NativeStackDescriptor,
   StackNavigationConfig,
-  StackNavigationHelpers,
+  NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
 
-function removeScene(navigation: StackNavigationHelpers) {
+function removeScene(navigation: NativeStackNavigationHelpers) {
   return navigation.dispatch(CommonActions.goBack());
 }
 
 function renderHeaderConfig(
-  descriptor: StackDescriptor,
+  descriptor: NativeStackDescriptor,
   config: StackNavigationConfig
 ) {
   const { options } = descriptor;
@@ -119,9 +119,9 @@ function renderHeaderConfig(
 useScreens(true);
 
 function renderScene(
-  descriptor: StackDescriptor,
+  descriptor: NativeStackDescriptor,
   config: StackNavigationConfig,
-  navigation: StackNavigationHelpers,
+  navigation: NativeStackNavigationHelpers,
   route: Route<string>
 ) {
   const { mode } = config;
@@ -153,7 +153,7 @@ function renderScene(
   );
 }
 
-function NativeStackNavigator(props: Props) {
+function NativeStackNavigator(props: NativeStacknavigatorProps) {
   if (!screensEnabled()) {
     throw new Error(
       'Native stack is only available if React Native Screens are enabled'
@@ -181,7 +181,12 @@ function NativeStackNavigator(props: Props) {
 }
 
 const styles = StyleSheet.create({
-  scenes: { flex: 1 },
+  scenes: {
+    flex: 1,
+  },
 });
 
-export default createNavigator(NativeStackNavigator);
+export default createNavigator<
+  NativeStackNavigationOptions,
+  typeof NativeStackNavigator
+>(NativeStackNavigator);
diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
@@ -44,7 +44,8 @@ export type NativeStackNavigationProp<
    */
   popToTop(): void;
 };
-export type StackNavigationHelpers = NavigationHelpers<ParamListBase, {}>;
+
+export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, {}>;
 
 export type HeaderMode = 'float' | 'screen' | 'none';
 
@@ -58,7 +59,9 @@ export type HeaderOptions = {
    * String to be used by the header.
    * Defaults to scene `title`.
    */
-  headerTitle?: string | ((options: NativeStackNavigationOptions) => React.ReactNode);
+  headerTitle?:
+    | string
+    | ((options: NativeStackNavigationOptions) => React.ReactNode);
   /**
    * Style object for the title component.
    */
@@ -126,11 +129,13 @@ export type NativeStackNavigationOptions = HeaderOptions & {
   cardTransparent?: boolean;
 };
 
-export type Props = DefaultNavigatorOptions<NativeStackNavigationOptions> &
+export type NativeStacknavigatorProps = DefaultNavigatorOptions<
+  NativeStackNavigationOptions
+> &
   StackRouterOptions &
   StackNavigationConfig;
 
-export type StackDescriptor = Descriptor<
+export type NativeStackDescriptor = Descriptor<
   ParamListBase,
   string,
   StackNavigationState,

diff --git a/yarn.lock b/yarn.lock
@@ -9231,7 +9231,7 @@ jest@^24.8.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-jetifier@^1.0.0-beta04.2, jetifier@^1.6.4:
+jetifier@^1.0.0-beta04.2:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.4.tgz#6159db8e275d97980d26162897a0648b6d4a3222"
   integrity sha512-+f/4OLeqY8RAmXnonI1ffeY1DR8kMNJPhv5WMFehchf7U71cjMQVKkOz1n6asz6kfVoAqKNWJz1A/18i18AcXA==