chore: migrate example to TS

Author: satya164

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

@@ -5,7 +5,10 @@ import { createAppContainer, SafeAreaView, ScrollView } from 'react-navigation';
 import {
   Assets as StackAssets,
   createStackNavigator,
+  NavigationStackScreenProps,
+  NavigationStackOptions,
 } from 'react-navigation-stack';
+// eslint-disable-next-line import/namespace
 import { List, Divider } from 'react-native-paper';
 
 import FullScreen from './src/FullScreen';
@@ -37,7 +40,13 @@ useScreens(true);
 // your app after you first load it with this option enabled.
 I18nManager.forceRTL(false);
 
-const data = [
+type Item = {
+  component: React.ComponentType<any>;
+  title: string;
+  routeName: string;
+};
+
+const data: Item[] = [
   { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
   { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
   { component: RevealStack, title: 'Reveal Preset', routeName: 'Reveal' },
@@ -99,19 +108,19 @@ const data = [
 // Cache images
 Asset.loadAsync(StackAssets);
 
-class Home extends React.Component {
+class Home extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Examples',
   };
 
-  _renderItem = ({ item }) => (
+  _renderItem = ({ item }: { item: Item }) => (
     <List.Item
       title={item.title}
       onPress={() => this.props.navigation.navigate(item.routeName)}
     />
   );
 
-  _keyExtractor = item => item.routeName;
+  _keyExtractor = (item: Item) => item.routeName;
 
   render() {
     return (
@@ -141,7 +150,12 @@ class SafeAreaScrollView extends React.Component {
 const Root = 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: {

example/index.js

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native';
-import App from './App';
+import App from './App.tsx';
 
 AppRegistry.registerComponent('StackExample', () => App);

example/package.json

@@ -26,8 +26,8 @@
     "react-native-web": "^0.11.4",
     "react-native-webview": "~5.12.0",
     "react-navigation": "^4.0.7",
-    "react-navigation-drawer": "^2.0.0",
-    "react-navigation-tabs": "2.2.0"
+    "react-navigation-drawer": "^2.2.2",
+    "react-navigation-tabs": "^2.5.5"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.2.0",

example/src/DragLimitedToModal.js example/src/DragLimitedToModal.tsxexample/src/DragLimitedToModal.js renamed to example/src/DragLimitedToModal.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, Text, StyleSheet, Dimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { NavigationStackScreenComponent } from 'react-navigation-stack';
 
 const HEIGHT = Dimensions.get('screen').height;
 
 const { interpolate } = Animated;
 
-const DragLimitedToModal = () => (
+const DragLimitedToModal: NavigationStackScreenComponent = () => (
   <View style={styles.modal}>
     <Text style={styles.text}>Adjusts to the size of text</Text>
   </View>

example/src/FullScreen.js example/src/FullScreen.tsxexample/src/FullScreen.js renamed to example/src/FullScreen.tsx

@@ -10,10 +10,12 @@ import MapView from 'react-native-maps';
 import {
   createStackNavigator,
   StackGestureContext,
+  NavigationStackScreenComponent,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 
-const IndexScreen = ({ navigation }) => (
+const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Button title="Go to MapView" onPress={() => navigation.navigate('Map')} />
     <Button title="Go to WebView" onPress={() => navigation.navigate('Web')} />
@@ -28,8 +30,15 @@ IndexScreen.navigationOptions = {
   title: 'Gesture Interactions',
 };
 
-class MapScreen extends React.Component {
-  constructor(props) {
+class MapScreen extends React.Component<
+  NavigationStackScreenProps,
+  { interactionComplete: boolean }
+> {
+  static navigationOptions = {
+    title: 'MapView',
+  };
+
+  constructor(props: NavigationStackScreenProps) {
     super(props);
     InteractionManager.runAfterInteractions(() => {
       this.setState({ interactionComplete: true });
@@ -63,10 +72,6 @@ class MapScreen extends React.Component {
   }
 }
 
-MapScreen.navigationOptions = {
-  title: 'MapView',
-};
-
 const WebViewScreen = () => (
   <StackGestureContext.Consumer>
     {ref => (

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

@@ -4,13 +4,14 @@ import {
   createStackNavigator,
   TransitionPresets,
   HeaderStyleInterpolators,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
 function createHeaderBackgroundExample(options = {}) {
   return createStackNavigator(
     {
       Login: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}
@@ -29,7 +30,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       Games: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}
@@ -48,7 +49,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       Main: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text style={styles.tips} onPress={() => navigation.navigate('My')}>
               Main Screen
@@ -60,7 +61,7 @@ function createHeaderBackgroundExample(options = {}) {
         },
       },
       My: {
-        screen: ({ navigation }) => (
+        screen: ({ navigation }: NavigationStackScreenProps) => (
           <View style={styles.container}>
             <Text
               style={styles.tips}

example/src/HeaderBackgrounds.js example/src/HeaderBackgrounds.tsxexample/src/HeaderBackgrounds.js renamed to example/src/HeaderBackgrounds.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Button, StatusBar } from 'react-native';
+import { Button, StatusBar, StyleProp, ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-navigation';
 import {
   createStackNavigator,
   TransitionPresets,
   HeaderStyleInterpolators,
+  NavigationStackScreenProps,
 } from 'react-navigation-stack';
 
-class HomeScreen extends React.Component {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -30,7 +31,7 @@ class HomeScreen extends React.Component {
   }
 }
 
-class OtherScreen extends React.Component {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Your title here',
   };
@@ -57,7 +58,7 @@ class OtherScreen extends React.Component {
   }
 }
 
-class ScreenWithLongTitle extends React.Component {
+class ScreenWithLongTitle extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: "Another title that's kind of long",
   };
@@ -76,7 +77,7 @@ class ScreenWithLongTitle extends React.Component {
   }
 }
 
-class ScreenWithNoHeader extends React.Component {
+class ScreenWithNoHeader extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     header: null,
     title: 'No Header',
@@ -109,7 +110,8 @@ const StackWithHeaderPreset = createStackNavigator(
     defaultNavigationOptions: {
       ...TransitionPresets.SlideFromRightIOS,
       headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-      headerTitleContainerStyle: { left: null },
+      // @ts-ignore
+      headerTitleContainerStyle: { left: null } as StyleProp<ViewStyle>,
       gestureEnabled: true,
     },
   }

example/src/HeaderPreset.js example/src/HeaderPreset.tsxexample/src/HeaderPreset.js renamed to example/src/HeaderPreset.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { Dimensions, Button, Image, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { FlatList, BorderlessButton } from 'react-native-gesture-handler';
 
-class ListScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
+class ListScreen extends React.Component<NavigationStackScreenProps> {
+  static navigationOptions = ({ navigation }: NavigationStackScreenProps) => ({
     title: 'Image list',
     headerBackTitle: 'Back',
     headerLeft: () => (
@@ -13,7 +16,7 @@ class ListScreen extends React.Component {
   });
 
   state = {
-    items: Array.apply(null, Array(60)).map((v, i) => {
+    items: Array.apply(null, Array(60)).map((_, i) => {
       return {
         id: i,
         src: `https://source.unsplash.com/random/400x${400 + i}`,
@@ -40,14 +43,14 @@ class ListScreen extends React.Component {
           </View>
         )}
         numColumns={3}
-        keyExtractor={(item, index) => index}
+        keyExtractor={(_, index) => String(index)}
         style={{ flex: 1, backgroundColor: '#fff' }}
       />
     );
   }
 }
 
-class DetailsScreen extends React.Component {
+class DetailsScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Random image from Unsplash',
   };

example/src/ImageStack.js example/src/ImageStack.tsxexample/src/ImageStack.js renamed to example/src/ImageStack.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';
 
-class ScreenOne extends React.Component {
+class ScreenOne extends React.Component<NavigationStackScreenProps> {
   componentDidMount() {
-    this._timer = setTimeout(() => {
+    setTimeout(() => {
       this.props.navigation.navigate('Screen2');
-      clearTimeout(this._timer);
     }, 0);
   }
 
@@ -29,7 +31,7 @@ class ScreenOne extends React.Component {
   }
 }
 
-class ScreenTwo extends React.Component {
+class ScreenTwo extends React.Component<NavigationStackScreenProps> {
   render() {
     return (
       <View style={styles.container}>