Merge pull request #15 from dsznajder/feat/typescript

Typescript

packages/animated-switch/.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+coverage/
+lib/

packages/animated-switch/.eslintrc

@@ -0,0 +1,22 @@
+{
+  "extends": "eslint-config-satya164",
+
+  "plugins": ["react-native-globals"],
+
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+
+  "env": {
+    "es6": true,
+    "react-native-globals/all": true
+  },
+
+  "rules": {
+    "import/no-unresolved": "off",
+    "react/sort-comp": "off",
+    "jest/no-disabled-tests": "off"
+  }
+}

packages/animated-switch/.gitignore

@@ -0,0 +1,15 @@
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Build
+dist/
+
+# Code coverage files
+coverage/
+
+# generated by bob
+lib/

packages/animated-switch/commitlint.config.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

packages/animated-switch/index.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { NavigationRouteConfigMap, SwitchNavigatorConfig, NavigationContainer } from 'react-navigation';
-import { Transition } from 'react-native-reanimated';
-
-export interface AnimatedSwitchNavigatorConfig extends SwitchNavigatorConfig {
-  transition?: React.Element<typeof Transition>;
-}
-
-export default function createAnimatedSwitchNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  switchConfig?: AnimatedSwitchNavigatorConfig
-): NavigationContainer;

packages/animated-switch/index.js

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { createNavigator, SceneView, SwitchRouter } from 'react-navigation';
-import { Transitioning, Transition } from 'react-native-reanimated';
-
-const DEFAULT_TRANSITION = (
-  <Transition.Together>
-    <Transition.Out type="fade" durationMs={200} interpolation="easeIn" />
-    <Transition.In type="fade" durationMs={200} />
-  </Transition.Together>
-);
-
-class SwitchView extends React.Component {
-  containerRef = React.createRef();
-
-  componentDidUpdate(prevProps) {
-    const { state: prevState } = prevProps.navigation;
-    const prevActiveKey = prevState.routes[prevState.index].key;
-    const { state } = this.props.navigation;
-    const activeKey = state.routes[state.index].key;
-
-    if (activeKey !== prevActiveKey && this.containerRef.current) {
-      this.containerRef.current.animateNextTransition();
-    }
-  }
-
-  render() {
-    const { state } = this.props.navigation;
-    const activeKey = state.routes[state.index].key;
-    const descriptor = this.props.descriptors[activeKey];
-    const ChildComponent = descriptor.getComponent();
-
-    const transition =
-      this.props.navigationConfig.transition || DEFAULT_TRANSITION;
-
-    return (
-      <Transitioning.View
-        ref={this.containerRef}
-        transition={transition}
-        style={{ flex: 1 }}
-      >
-        <SceneView
-          component={ChildComponent}
-          navigation={descriptor.navigation}
-          screenProps={this.props.screenProps}
-        />
-      </Transitioning.View>
-    );
-  }
-}
-
-export default function createAnimatedSwitchNavigator(
-  routeConfigMap,
-  switchConfig = {}
-) {
-  const router = SwitchRouter(routeConfigMap, switchConfig);
-  const Navigator = createNavigator(SwitchView, router, switchConfig);
-  return Navigator;
-}

packages/animated-switch/package.json

@@ -1,9 +1,67 @@
 {
   "name": "react-navigation-animated-switch",
   "version": "0.2.1",
-  "description": "",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "description": "Animated switch for React Navigation",
+  "main": "lib/commonjs/index.js",
+  "react-native": "lib/module/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
   "author": "",
-  "license": "MIT"
+  "license": "MIT",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "scripts": {
+    "lint": "eslint --ext .js,.ts,.tsx .",
+    "prepare": "bob build",
+    "release": "release-it",
+    "typescript": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "8.1.0",
+    "@react-native-community/bob": "0.6.1",
+    "@react-navigation/core": "3.4.2",
+    "@release-it/conventional-changelog": "1.1.0",
+    "@types/react": "16.8.24",
+    "@types/react-native": "0.60.3",
+    "commitlint": "8.1.0",
+    "eslint": "6.1.0",
+    "eslint-config-satya164": "2.4.1",
+    "eslint-plugin-react-native-globals": "0.1.2",
+    "husky": "3.0.2",
+    "prettier": "1.18.2",
+    "react": "16.8.6",
+    "react-native": "0.60.4",
+    "react-native-reanimated": "1.1.0",
+    "react-navigation": "3.11.1",
+    "release-it": "12.3.5",
+    "typescript": "3.5.3"
+  },
+  "peerDependencies": {
+    "@react-navigation/core": "^3.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": "^1.0.0",
+    "react-navigation": "^3.0.0"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint && yarn typescript",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
 }

packages/animated-switch/release-it.json

@@ -0,0 +1,17 @@
+{
+  "git": {
+    "commitMessage": "chore: release %s",
+    "tagName": "v%s"
+  },
+  "npm": {
+    "publish": true
+  },
+  "github": {
+    "release": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular"
+    }
+  }
+}

packages/animated-switch/src/index.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  NavigationProp,
+  NavigationDescriptor,
+  NavigationState,
+  NavigationRouteConfigMap,
+  ScreenProps,
+  NavigationContainer,
+  SwitchNavigatorConfig,
+} from 'react-navigation';
+import {
+  createNavigator,
+  SceneView,
+  SwitchRouter,
+} from '@react-navigation/core';
+import {
+  TransitioningView,
+  Transitioning,
+  Transition,
+} from 'react-native-reanimated';
+
+const DEFAULT_TRANSITION = (
+  <Transition.Together>
+    <Transition.Out type="fade" durationMs={200} interpolation="easeIn" />
+    <Transition.In type="fade" durationMs={200} />
+  </Transition.Together>
+);
+
+interface Props {
+  navigation: NavigationProp<NavigationState> & {
+    navigationConfig: { transition?: React.ReactNode };
+  };
+  descriptors: { [key: string]: NavigationDescriptor };
+  screenProps?: ScreenProps;
+}
+
+class AnimatedSwitchView extends React.Component<Props, {}> {
+  containerRef = React.createRef<TransitioningView>();
+
+  componentDidUpdate(prevProps: Props) {
+    const { state: prevState } = prevProps.navigation;
+    const prevActiveKey = prevState.routes[prevState.index].key;
+    const { state } = this.props.navigation;
+    const activeKey = state.routes[state.index].key;
+
+    if (activeKey !== prevActiveKey && this.containerRef.current) {
+      this.containerRef.current.animateNextTransition();
+    }
+  }
+
+  render() {
+    const { state, navigationConfig } = this.props.navigation;
+    const activeKey = state.routes[state.index].key;
+    const descriptor = this.props.descriptors[activeKey];
+    const ChildComponent = descriptor.getComponent();
+
+    const transition =
+      (navigationConfig && navigationConfig.transition) || DEFAULT_TRANSITION;
+
+    return (
+      <Transitioning.View
+        ref={this.containerRef}
+        transition={transition}
+        style={styles.container}
+      >
+        <SceneView
+          component={ChildComponent}
+          navigation={descriptor.navigation}
+          screenProps={this.props.screenProps}
+        />
+      </Transitioning.View>
+    );
+  }
+}
+
+export interface AnimatedSwitchNavigatorConfig extends SwitchNavigatorConfig {
+  transition?: React.ReactNode;
+}
+
+export default function createAnimatedSwitchNavigator(
+  routeConfigMap: NavigationRouteConfigMap,
+  switchConfig: SwitchNavigatorConfig & {
+    transition?: React.ReactNode;
+  }
+): NavigationContainer {
+  const router = SwitchRouter(routeConfigMap, switchConfig);
+  const Navigator = createNavigator(AnimatedSwitchView, router, switchConfig);
+
+  return Navigator;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/animated-switch/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "plugins": [{ "name": "typescript-tslint-plugin" }]
+  },
+  "typeAcquisition": {
+    "enable": true,
+    "include": ["react", "react-native"]
+  }
+}

packages/animated-switch/tslint.json

@@ -0,0 +1,12 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "arrow-parens": [true, "ban-single-arg-parens"],
+    "arrow-return-shorthand": [true, "multiline"],
+    "trailing-comma": false,
+    "quotemark": {
+      "options": ["single", "avoid-escape"]
+    },
+    "object-literal-sort-keys": false
+  }
+}

packages/animated-switch/types/@react-navigation/core.d.ts

@@ -0,0 +1,29 @@
+declare module '@react-navigation/core' {
+  import * as React from 'react';
+  import { Transition } from 'react-native-reanimated';
+  import {
+    NavigationRouteConfigMap,
+    NavigationContainer,
+    SwitchNavigatorConfig,
+    NavigationRouter,
+  } from 'react-navigation';
+
+  export const SceneView: React.ComponentType<{
+    screenProps: unknown;
+    navigation: object;
+    component: React.ComponentType<any>;
+  }>;
+
+  export function createNavigator(
+    StackView: React.ComponentType<any>,
+    router: NavigationRouter<S, Options>,
+    navigatorConfig?: {} | null
+  ): NavigationContainer;
+
+  export function SwitchRouter(
+    routeConfigMap: NavigationRouteConfigMap,
+    switchConfig: SwitchNavigatorConfig & {
+      transition?: React.ReactNode;
+    }
+  );
+}