Migrate source files to Typescript

.eslintrc.json

@@ -8,14 +8,16 @@
     "react": { "version": "16" },
     "import/resolver": {
       "babel-module": {}
-    }
+    },
+    "import/core-modules": ["react-native-gesture-handler/Swipeable"]
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json"
   },
   "env": { "browser": true, "node": true, "jest/globals": true },
   "plugins": ["jest"],
+  "ignorePatterns": ["dist/**/*"],
   "rules": {
     "no-use-before-define": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -35,6 +37,8 @@
     "@typescript-eslint/ban-ts-comment": [
       "error",
       {
+        // ↓ TODO ts-nocheck should be removed after transition to TS ↓
+        "ts-nocheck": "allow-with-description",
         "ts-ignore": "allow-with-description",
         "ts-expect-error": "allow-with-description"
       }

.gitignore

@@ -55,5 +55,4 @@ jsconfig.json
 .vscode
 
 # TS
-
 dist/

.travis.yml

@@ -118,8 +118,9 @@ matrix:
           - node_modules
       script:
         - yarn
+        - yarn tsc --noEmit
+        - yarn lint-check
         - cd examples/Example
         - yarn
-        - cd ../..
         - yarn tsc --noEmit
         - yarn lint-check

DrawerLayout.d.ts

@@ -1,6 +1,11 @@
 declare module 'react-native-gesture-handler/DrawerLayout' {
-  import * as React from 'react'
-  import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
+  import * as React from 'react';
+  import {
+    Animated,
+    StatusBarAnimation,
+    StyleProp,
+    ViewStyle,
+  } from 'react-native';
 
   export type DrawerPosition = 'left' | 'right';
 

DrawerLayout/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/src/components/DrawerLayout",
+  "react-native": "../dist/src/components/DrawerLayout",
+  "types": "../DrawerLayout.d.ts"
+}

Swipeable.d.ts

@@ -1,17 +1,23 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
 declare module 'react-native-gesture-handler/Swipeable' {
-  import * as React from 'react'
+  import * as React from 'react';
   import { Animated, StyleProp, ViewStyle } from 'react-native';
-  import { PanGestureHandlerProperties } from 'react-native-gesture-handler'
-  type SwipeableExcludes = Exclude<keyof PanGestureHandlerProperties, 'onGestureEvent' | 'onHandlerStateChange'>
+  import { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+  type SwipeableExcludes = Exclude<
+    keyof PanGestureHandlerProperties,
+    'onGestureEvent' | 'onHandlerStateChange'
+  >;
 
-  interface SwipeableProperties extends Pick<PanGestureHandlerProperties, SwipeableExcludes> {
+  interface SwipeableProperties
+    extends Pick<PanGestureHandlerProperties, SwipeableExcludes> {
     enableTrackpadTwoFingerGesture?: boolean;
     friction?: number;
     leftThreshold?: number;
     rightThreshold?: number;
     overshootLeft?: boolean;
     overshootRight?: boolean;
-    overshootFriction?: number,
+    overshootFriction?: number;
     onSwipeableLeftOpen?: () => void;
     onSwipeableRightOpen?: () => void;
     onSwipeableOpen?: () => void;

Swipeable/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/src/components/Swipeable",
+  "react-native": "../dist/src/components/Swipeable",
+  "types": "../Swipeable.d.ts"
+}

examples/Example/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "satya164"
+  ],
+  "settings": {
+    "react": { "version": "16" },
+    "import/resolver": {
+      "babel-module": {}
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": { "browser": true, "node": true, "jest/globals": true },
+  "plugins": ["jest"],
+  "ignorePatterns": ["dist/**/*"],
+  "rules": {
+    "no-use-before-define": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "import/named": "off",
+    "react/sort-comp": "off",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "error",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        // ↓ TODO ts-nocheck should be removed after transition to TS ↓
+        "ts-nocheck": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-expect-error": "allow-with-description"
+      }
+    ]
+  }
+}

examples/Example/babel.config.js

@@ -1,10 +1,10 @@
 module.exports = {
-  presets: ['babel-preset-expo'],
   plugins: [
     '@babel/plugin-transform-modules-commonjs',
     [
       'module-resolver',
       {
+        extensions: ['.js', '.ts', '.tsx'],
         alias: {
           'react-native-gesture-handler': '../../',
           'react': './node_modules/react',

examples/Example/ios/Podfile.lock

@@ -306,8 +306,6 @@ PODS:
     - React
   - RNGestureHandler (1.9.0):
     - React-Core
-  - RNReanimated (1.13.2):
-    - React-Core
   - RNScreens (2.15.0):
     - React-Core
   - Yoga (1.14.0)
@@ -366,7 +364,6 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../../..`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -446,8 +443,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
     :path: "../../.."
-  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   Yoga:
@@ -457,7 +452,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: 878b59e31113e289e275165efbe4b54fa614d43d
   FBReactNativeSpec: 7da9338acfb98d4ef9e5536805a0704572d33c2f
   Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
@@ -467,8 +462,8 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
   FlipperKit: ab353d41aea8aae2ea6daaf813e67496642f3d7d
-  Folly: aeb27d02cdff07ca01f8a8a5a6dd5bcaf6be6f70
-  glog: 2ad46e202fbaa5641fceb4b2af37dcd88fd8762d
+  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
+  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   OpenSSL-Universal: ff34003318d5e1163e9529b08470708e389ffcdd
   RCTRequired: 48884c74035a0b5b76dbb7a998bd93bcfc5f2047
   RCTTypeSafety: edf4b618033c2f1c5b7bc3d90d8e085ed95ba2ab
@@ -495,7 +490,6 @@ SPEC CHECKSUMS:
   ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
-  RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: 2ad555d4d9fa10b91bb765ca07fe9b29d59573f0
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

examples/Example/package.json

@@ -7,7 +7,9 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "ts-check": "yarn tsc --noEmit",
+    "lint-check": "yarn eslint src/ && yarn prettier --check src/"
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
@@ -34,9 +36,9 @@
     "@typescript-eslint/parser": "^4.9.1",
     "babel-jest": "^25.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "^8.3.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint": "^7.16.0",
+    "eslint-import-resolver-babel-module": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
     "glob-to-regexp": "^0.4.1",
     "jest": "^25.1.0",
     "metro-config": "^0.64.0",

examples/Example/src/touchables/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck TODO(TS) provide types
 import React, { Component } from 'react';
 import { StackScreenProps } from '@react-navigation/stack';
 

examples/Example/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    // TODO(TS) Remove after we migrate to TS entirely
+    "paths": {
+      "react-native-gesture-handler": [
+        "../../react-native-gesture-handler.d.ts"
+      ],
+      "react-native-gesture-handler/Swipeable": ["../../Swipeable.d.ts"],
+      "react-native-gesture-handler/DrawerLayout": ["../../DrawerLayout.d.ts"]
+    },
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "allowJs": true,
+    "noStrictGenericChecks": false,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitUseStrict": false,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "index.js"]
+}