feat: export types for ScreenProps amd ScreenComponent

Author: satya164

.eslintrc

@@ -14,6 +14,8 @@
 
   "rules": {
     "import/named": "off",
+    "import/default": "off",
+    "import/namespace": "off",
     "react-native/no-inline-styles": "off"
   }
 }

example/App.js renamed to example/App.tsx

@@ -1,13 +1,18 @@
 import * as React from 'react';
-// eslint-disable-next-line no-unused-vars
-import { View, TouchableOpacity, FlatList, I18nManager } from 'react-native';
+import { View, TouchableOpacity, FlatList } from 'react-native';
 import {
   ThemeContext,
   ThemeColors,
   Themed,
   createAppContainer,
+  SupportedThemes,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackOptions,
+  NavigationStackProp,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { List, Divider } from 'react-native-paper';
 
@@ -17,9 +22,13 @@ import StyledDrawer from './src/StyledDrawer';
 import GestureInteraction from './src/GestureInteraction';
 import RTLDrawer from './src/RTLDrawer';
 
-// I18nManager.forceRTL(false);
+type Item = {
+  component: React.ComponentType;
+  title: string;
+  routeName: string;
+};
 
-const data = [
+const data: Item[] = [
   {
     component: SimpleDrawer,
     title: 'Simple - persistent routes like tabs',
@@ -48,9 +57,14 @@ const data = [
   },
 ];
 
-class Row extends React.PureComponent {
+class Row extends React.PureComponent<{
+  navigation: NavigationStackProp;
+  item: Item;
+}> {
   static contextType = ThemeContext;
 
+  context: SupportedThemes = 'light';
+
   render() {
     let { item, navigation } = this.props;
 
@@ -65,15 +79,16 @@ class Row extends React.PureComponent {
   }
 }
 
-class Home extends React.Component {
+class Home extends React.Component<NavigationStackScreenProps> {
   static contextType = ThemeContext;
 
   static navigationOptions = {
     title: 'Examples',
   };
 
-  _keyExtractor = item => item.routeName;
-  _renderItem = ({ item }) => {
+  _keyExtractor = (item: Item) => item.routeName;
+
+  _renderItem = ({ item }: { item: Item }) => {
     return <Row item={item} navigation={this.props.navigation} />;
   };
 
@@ -95,7 +110,12 @@ class Home extends React.Component {
 const MainNavigator = createStackNavigator(
   {
     Home: createStackNavigator({ Home }),
-    ...data.reduce((acc, it) => {
+    ...data.reduce<{
+      [key: string]: {
+        screen: React.ComponentType<any>;
+        navigationOptions: NavigationStackOptions;
+      };
+    }>((acc, it) => {
       acc[it.routeName] = {
         screen: it.component,
         navigationOptions: {
@@ -118,7 +138,7 @@ const MainNavigator = createStackNavigator(
 const Navigation = createAppContainer(MainNavigator);
 
 const App = () => {
-  let [theme, setTheme] = React.useState('light');
+  let [theme, setTheme] = React.useState<SupportedThemes>('light');
 
   return (
     <View style={{ flex: 1 }}>

example/package.json

@@ -20,8 +20,8 @@
     "react-native-paper": "^2.2.0",
     "react-native-reanimated": "~1.1.0",
     "react-native-webview": "~5.12.0",
-    "react-navigation": "^4.0.3",
-    "react-navigation-stack": "^1.4.0"
+    "react-navigation": "^4.0.4",
+    "react-navigation-stack": "^1.7.3"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.2.0",

example/src/GestureInteraction.js renamed to example/src/GestureInteraction.tsx

@@ -4,44 +4,42 @@ import { withNavigation } from 'react-navigation';
 import {
   createDrawerNavigator,
   DrawerGestureContext,
+  NavigationDrawerProp,
 } from 'react-navigation-drawer';
 import MapView from 'react-native-maps';
 import { WebView } from 'react-native-webview';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 
-@withNavigation
-class ContainerWithButtons extends React.Component {
-  render() {
-    return (
-      <View style={{ flex: 1 }}>
-        {this.props.children}
-        <View
-          style={{
-            position: 'absolute',
-            paddingBottom: 30,
-            bottom: 0,
-            paddingTop: 10,
-            paddingHorizontal: 10,
-            left: 0,
-            flexDirection: 'row',
-            right: 0,
-            backgroundColor: 'rgba(255,255,255,0.7)',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Button
-            title="Open drawer"
-            onPress={() => this.props.navigation.openDrawer()}
-          />
-          <Button
-            title="Go back"
-            onPress={() => this.props.navigation.navigate('Home')}
-          />
-        </View>
+const ContainerWithButtons = withNavigation(
+  ({
+    children,
+    navigation,
+  }: {
+    children: React.ReactNode;
+    navigation: NavigationDrawerProp;
+  }) => (
+    <View style={{ flex: 1 }}>
+      {children}
+      <View
+        style={{
+          position: 'absolute',
+          paddingBottom: 30,
+          bottom: 0,
+          paddingTop: 10,
+          paddingHorizontal: 10,
+          left: 0,
+          flexDirection: 'row',
+          right: 0,
+          backgroundColor: 'rgba(255,255,255,0.7)',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
+        <Button title="Go back" onPress={() => navigation.navigate('Home')} />
       </View>
-    );
-  }
-}
+    </View>
+  )
+);
 
 const MapScreen = () => (
   <ContainerWithButtons>

example/src/ParallaxDrawer.js renamed to example/src/ParallaxDrawer.tsx

@@ -7,15 +7,40 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { ThemeColors, useTheme, Themed, SafeAreaView } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
-import { createDrawerNavigator } from 'react-navigation-drawer';
+import {
+  ThemeColors,
+  useTheme,
+  Themed,
+  SafeAreaView,
+  NavigationRoute,
+} from 'react-navigation';
+import {
+  createStackNavigator,
+  NavigationStackScreenComponent,
+  NavigationStackProp,
+} from 'react-navigation-stack';
+import {
+  createDrawerNavigator,
+  DrawerContentComponentProps,
+  NavigationDrawerOptions,
+  NavigationDrawerProp,
+} from 'react-navigation-drawer';
 import Animated from 'react-native-reanimated';
 import { MaterialIcons } from '@expo/vector-icons';
 
-const SampleText = ({ children }) => <Themed.Text>{children}</Themed.Text>;
+type Params = { drawerLockMode: 'unlocked' | 'locked-open' | 'locked-closed' };
+
+const SampleText = ({ children }: { children: React.ReactNode }) => (
+  <Themed.Text>{children}</Themed.Text>
+);
 
-const MyNavScreen = ({ navigation, banner }) => {
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationStackProp<NavigationRoute, Params>;
+  banner: string;
+}) => {
   let theme = useTheme();
 
   return (
@@ -109,20 +134,22 @@ const MyNavScreen = ({ navigation, banner }) => {
   );
 };
 
-const InboxScreen = ({ navigation }) => (
-  <MyNavScreen banner="Inbox Screen" navigation={navigation} />
-);
+const InboxScreen: NavigationStackScreenComponent<Params> = ({
+  navigation,
+}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
+
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
 
-const EmailScreen = ({ navigation }) => (
-  <MyNavScreen banner="Email Screen" navigation={navigation} />
-);
+const EmailScreen: NavigationStackScreenComponent<Params> = ({
+  navigation,
+}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
+
+const DraftsScreen: NavigationStackScreenComponent<Params> = ({
+  navigation,
+}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
 
-const DraftsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Drafts Screen" navigation={navigation} />
-);
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
@@ -133,19 +160,23 @@ const InboxStack = createStackNavigator(
     Email: { screen: EmailScreen },
   },
   {
-    navigationOptions: ({ navigation }) => ({
-      drawerLabel: 'Inbox',
-      drawerLockMode: (
-        navigation.state.routes[navigation.state.index].params || {}
-      ).drawerLockMode,
-      drawerIcon: ({ tintColor }) => (
-        <MaterialIcons
-          name="move-to-inbox"
-          size={24}
-          style={{ color: tintColor }}
-        />
-      ),
-    }),
+    navigationOptions: ({ navigation }) => {
+      const options: NavigationDrawerOptions = {
+        drawerLabel: 'Inbox',
+        drawerLockMode: (
+          navigation.state.routes[navigation.state.index].params || {}
+        ).drawerLockMode,
+        drawerIcon: ({ tintColor }) => (
+          <MaterialIcons
+            name="move-to-inbox"
+            size={24}
+            style={{ color: tintColor }}
+          />
+        ),
+      };
+
+      return options;
+    },
   }
 );
 
@@ -155,19 +186,27 @@ const DraftsStack = createStackNavigator(
     Email: { screen: EmailScreen },
   },
   {
-    navigationOptions: ({ navigation }) => ({
-      drawerLabel: 'Drafts',
-      drawerLockMode: (
-        navigation.state.routes[navigation.state.index].params || {}
-      ).drawerLockMode,
-      drawerIcon: ({ tintColor }) => (
-        <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
-      ),
-    }),
+    navigationOptions: ({ navigation }) => {
+      const options: NavigationDrawerOptions = {
+        drawerLabel: 'Drafts',
+        drawerLockMode: (
+          navigation.state.routes[navigation.state.index].params || {}
+        ).drawerLockMode,
+        drawerIcon: ({ tintColor }) => (
+          <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
+        ),
+      };
+
+      return options;
+    },
   }
 );
 
-const DrawerContents = ({ drawerOpenProgress, navigation }) => {
+const DrawerContents = ({
+  drawerOpenProgress,
+  descriptors,
+  navigation,
+}: DrawerContentComponentProps) => {
   // `contentComponent` is passed an Animated.Value called drawerOpenProgress
   // that can be used to do interesting things like a simple parallax drawe
   const translateX = Animated.interpolate(drawerOpenProgress, {
@@ -179,15 +218,23 @@ const DrawerContents = ({ drawerOpenProgress, navigation }) => {
     <Animated.View style={{ transform: [{ translateX }] }}>
       <ScrollView>
         <SafeAreaView forceInset={{ top: 'always' }}>
-          <DrawerItem navigation={navigation} item="Drafts" />
-          <DrawerItem navigation={navigation} item="Email" />
+          {navigation.state.routes.map(route => (
+            <DrawerItem
+              key={route.key}
+              navigation={descriptors[route.key].navigation}
+              item={route.routeName}
+            />
+          ))}
         </SafeAreaView>
       </ScrollView>
     </Animated.View>
   );
 };
 
-const DrawerItem = props => {
+const DrawerItem = (props: {
+  navigation: NavigationDrawerProp;
+  item: string;
+}) => {
   return (
     <TouchableOpacity onPress={() => props.navigation.navigate(props.item)}>
       <Themed.Text style={{ padding: 10, fontSize: 18, fontWeight: '600' }}>