refactor: migrate codebase to typescript

.circleci/config.yml

@@ -32,14 +32,14 @@ jobs:
       - persist_to_workspace:
           root: .
           paths: .
-  lint-and-flow:
+  lint-and-typecheck:
       <<: *defaults
       steps:
         - attach_workspace:
             at: ~/project
         - run: |
             yarn run lint
-            yarn run flow
+            yarn run typescript
   unit-tests:
       <<: *defaults
       steps:
@@ -55,6 +55,6 @@ workflows:
   build-and-test:
     jobs:
       - install-dependencies
-      - lint-and-flow:
+      - lint-and-typecheck:
           requires:
             - install-dependencies

.eslintignore

@@ -1,2 +1,4 @@
 node_modules/
-flow-typed/
+
+# generated by bob
+lib/

.eslintrc.json

@@ -5,10 +5,5 @@
 
   "env": {
     "react-native-globals/all": true
-  },
-
-  "rules": {
-    "flowtype/no-dupe-keys": "off",
-    "flowtype/no-existential-type": "off"
   }
 }

.gitignore

@@ -7,7 +7,6 @@
 
 # VSCode
 .vscode/
-tsconfig.json
 jsconfig.json
 
 # Xcode
@@ -48,3 +47,6 @@ buck-out/
 \.buckd/
 android/app/libs
 android/keystores/debug.keystore
+
+# generated by bob
+lib/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -16,7 +16,7 @@ A cross-platform Tab View component for React Native.
 - Supports both top and bottom tab bars
 - Follows Material Design spec
 - Highly customizable
-- Fully typed with [Flow](https://flow.org/)
+- Fully typed with [TypeScript](https://typescriptlang.org)
 
 ## Demo
 
@@ -567,10 +567,10 @@ On Android, enabling `removeClippedSubviews` can improve memory usage. This opti
 
 While developing, you can run the [example app](/example/README.md) to test your changes.
 
-Make sure your code passes Flow and ESLint. Run the following to verify:
+Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
-yarn flow
+yarn typescript
 yarn lint
 ```
 

example/.babelrc

@@ -5,7 +5,7 @@
   "plugins": [
     ["module-resolver", {
       "alias": {
-        "react-native-tab-view": "../src/index.js"
+        "react-native-tab-view": "../src/index"
       }
     }]
   ]

example/index.js

@@ -0,0 +1 @@
+export * from './src/App.tsx';

example/package.json

@@ -2,7 +2,7 @@
   "name": "tabviewexample",
   "version": "0.0.1",
   "private": true,
-  "main": "src/App.js",
+  "main": "index.js",
   "scripts": {
     "start": "expo start",
     "android": "expo android",

example/src/App.js → example/src/App.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { registerRootComponent, Asset, KeepAwake } from 'expo';
 import * as React from 'react';
 import {
@@ -21,16 +19,24 @@ import CustomTabBarExample from './CustomTabBarExample';
 import CoverflowExample from './CoverflowExample';
 
 type State = {
-  title: string,
-  index: number,
-  restoring: boolean,
+  title: string;
+  index: number;
+  restoring: boolean;
+};
+
+type ExampleComponentType = React.ComponentType<{}> & {
+  title: string;
+  tintColor?: string;
+  backgroundColor?: string;
+  statusBarStyle?: 'light-content' | 'dark-content';
+  appbarElevation?: number;
 };
 
 YellowBox.ignoreWarnings(['bind():']);
 
 const PERSISTENCE_KEY = 'index_persistence';
 
-const EXAMPLE_COMPONENTS = [
+const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   ScrollableTabBarExample,
   TabBarIconExample,
   CustomIndicatorExample,
@@ -47,7 +53,7 @@ export default class ExampleList extends React.Component<{}, State> {
 
   componentDidMount() {
     if (process.env.NODE_ENV !== 'production') {
-      this._restoreNavigationState();
+      this.restoreNavigationState();
     }
 
     [
@@ -62,21 +68,21 @@ export default class ExampleList extends React.Component<{}, State> {
     ].map(image => Asset.fromModule(image).downloadAsync());
   }
 
-  _persistNavigationState = async (currentIndex: number) => {
+  private persistNavigationState = async (currentIndex: number) => {
     if (process.env.NODE_ENV !== 'production') {
       await AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(currentIndex));
     }
   };
 
-  _restoreNavigationState = async () => {
+  private restoreNavigationState = async () => {
     this.setState({
       restoring: true,
     });
 
     const savedIndexString = await AsyncStorage.getItem(PERSISTENCE_KEY);
 
     try {
-      const savedIndex = JSON.parse(savedIndexString);
+      const savedIndex = JSON.parse(savedIndexString || '');
 
       if (
         Number.isFinite(savedIndex) &&
@@ -96,30 +102,28 @@ export default class ExampleList extends React.Component<{}, State> {
     });
   };
 
-  _handleNavigate = index => {
+  private handleNavigate = (index: number) => {
     this.setState({
       index,
     });
-    this._persistNavigationState(index);
+    this.persistNavigationState(index);
   };
 
-  _handleNavigateBack = () => {
-    this._handleNavigate(-1);
+  private handleNavigateBack = () => {
+    this.handleNavigate(-1);
   };
 
-  _renderItem = (component, i) => {
-    return (
-      <TouchableOpacity
-        key={i}
-        style={styles.touchable}
-        onPress={() => this._handleNavigate(i)}
-      >
-        <Text style={styles.item}>
-          {i + 1}. {component.title}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
+  private renderItem = (component: ExampleComponentType, i: number) => (
+    <TouchableOpacity
+      key={i}
+      style={styles.touchable}
+      onPress={() => this.handleNavigate(i)}
+    >
+      <Text style={styles.item}>
+        {i + 1}. {component.title}
+      </Text>
+    </TouchableOpacity>
+  );
 
   render() {
     if (this.state.restoring) {
@@ -138,7 +142,7 @@ export default class ExampleList extends React.Component<{}, State> {
         ? ExampleComponent.tintColor
         : 'white';
     const appbarElevation =
-      ExampleComponent && Number.isFinite(ExampleComponent.appbarElevation)
+      ExampleComponent && typeof ExampleComponent.appbarElevation === 'number'
         ? ExampleComponent.appbarElevation
         : 4;
     const statusBarStyle =
@@ -151,10 +155,7 @@ export default class ExampleList extends React.Component<{}, State> {
     return (
       <View style={styles.container}>
         <StatusBar
-          barStyle={
-            /* $FlowFixMe */
-            Platform.OS === 'ios' ? statusBarStyle : 'light-content'
-          }
+          barStyle={Platform.OS === 'ios' ? statusBarStyle : 'light-content'}
         />
         <KeepAwake />
         <View
@@ -175,7 +176,7 @@ export default class ExampleList extends React.Component<{}, State> {
           {index > -1 ? (
             <TouchableOpacity
               style={styles.button}
-              onPress={this._handleNavigateBack}
+              onPress={this.handleNavigateBack}
             >
               <Ionicons
                 name={
@@ -192,7 +193,7 @@ export default class ExampleList extends React.Component<{}, State> {
           {index > -1 ? <View style={styles.button} /> : null}
         </View>
         {index === -1 ? (
-          <ScrollView>{EXAMPLE_COMPONENTS.map(this._renderItem)}</ScrollView>
+          <ScrollView>{EXAMPLE_COMPONENTS.map(this.renderItem)}</ScrollView>
         ) : ExampleComponent ? (
           <ExampleComponent />
         ) : null}