feat: upgrade project and add example

BREAKING CHANGE: Migrate to React Navigation 4.x

packages/animated-switch/.eslintrc

@@ -1,22 +1,3 @@
 {
-  "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"
-  }
+  "extends": "eslint-config-satya164"
 }

packages/animated-switch/commitlint.config.js

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

packages/animated-switch/example/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "../.eslintrc",
+
+  "settings": {
+    "import/core-modules": [ "react-navigation-animated-switch" ]
+  }
+}

packages/animated-switch/example/.gitignore

@@ -0,0 +1,3 @@
+# XDE
+#
+.expo/

packages/animated-switch/example/App.js

@@ -0,0 +1 @@
+export { default } from './src/index.tsx';

packages/animated-switch/example/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "React Navigation Animated Switch Example",
+    "description": "Demonstrates the various capabilities of react-navigation-animated-switch",
+    "slug": "react-navigation-animated-switch-drawer-demo",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "version": "1.0.0",
+    "orientation": "default",
+    "primaryColor": "#cccccc",
+    "notification": {
+      "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
+      "color": "#000000"
+    },
+    "packagerOpts": {
+      "assetExts": [
+        "ttf"
+      ],
+      "config": "./metro.config.js",
+      "projectRoots": ""
+    },
+    "platforms": [
+      "android",
+      "ios"
+    ]
+  }
+}

packages/animated-switch/example/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: ['expo'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-navigation-animated-switch': '../src/index',
+        },
+      },
+    ],
+  ],
+};

packages/animated-switch/example/metro.config.js

@@ -0,0 +1,46 @@
+// /* eslint-disable import/no-commonjs */
+
+const path = require('path');
+const fs = require('fs');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const blacklist = require('metro-config/src/defaults/blacklist');
+const escape = require('escape-string-regexp');
+
+const root = path.resolve(__dirname, '..');
+const pak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
+
+const modules = [
+  '@babel/runtime',
+  '@expo/vector-icons',
+  ...Object.keys({
+    ...pak.dependencies,
+    ...pak.peerDependencies,
+  }),
+];
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
+    ]),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};

packages/animated-switch/example/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "reanimated-switch-example",
+  "version": "0.0.1",
+  "description": "Example for Reanimated Switch Navigator",
+  "author": "",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo android",
+    "ios": "expo ios"
+  },
+  "main": "node_modules/expo/AppEntry.js",
+  "dependencies": {
+    "expo": "^36.0.0",
+    "expo-keep-awake": "~8.0.0",
+    "react": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-navigation": "^4.0.10"
+  },
+  "devDependencies": {
+    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-preset-expo": "^8.0.0",
+    "escape-string-regexp": "^2.0.0",
+    "expo-cli": "^3.11.1"
+  },
+  "resolutions": {
+    "**/react": "16.9.0"
+  }
+}

packages/animated-switch/example/src/index.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Text, View, Button, StyleSheet } from 'react-native';
+import { createAppContainer } from 'react-navigation';
+import createAnimatedSwitchNavigator, {
+  NavigationAnimatedSwitchProp,
+} from 'react-navigation-animated-switch';
+import { Transition } from 'react-native-reanimated';
+
+function Home({ navigation }: { navigation: NavigationAnimatedSwitchProp }) {
+  return (
+    <View style={styles.content}>
+      <Text>Home screen</Text>
+      <Button
+        title="Go to settings"
+        onPress={() => navigation.navigate('Settings')}
+      />
+    </View>
+  );
+}
+
+function Settings({
+  navigation,
+}: {
+  navigation: NavigationAnimatedSwitchProp;
+}) {
+  return (
+    <View style={styles.content}>
+      <Text>Settings screen</Text>
+      <Button title="Go to home" onPress={() => navigation.navigate('Home')} />
+    </View>
+  );
+}
+
+const MySwitch = createAnimatedSwitchNavigator(
+  {
+    Home,
+    Settings,
+  },
+  {
+    transition: (
+      <Transition.Together>
+        <Transition.Out
+          type="slide-bottom"
+          durationMs={400}
+          interpolation="easeIn"
+        />
+        <Transition.In type="fade" durationMs={500} />
+      </Transition.Together>
+    ),
+  }
+);
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default createAppContainer(MySwitch);

packages/animated-switch/package.json

@@ -16,34 +16,36 @@
     "lint": "eslint --ext .js,.ts,.tsx .",
     "prepare": "bob build",
     "release": "release-it",
-    "typescript": "tsc --noEmit"
+    "typescript": "tsc --noEmit",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "8.1.0",
-    "@react-native-community/bob": "0.6.1",
-    "@react-navigation/core": "3.4.2",
+    "@commitlint/config-conventional": "8.2.0",
+    "@react-native-community/bob": "0.7.0",
     "@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"
+    "@types/react": "16.9.16",
+    "@types/react-native": "0.60.25",
+    "commitlint": "8.2.0",
+    "eslint": "^6.7.2",
+    "eslint-config-satya164": "^3.1.2",
+    "husky": "3.1.0",
+    "prettier": "^1.19.1",
+    "react": "~16.9.0",
+    "react-native": "~0.61.5",
+    "react-native-reanimated": "~1.4.0",
+    "react-navigation": "^4.0.10",
+    "release-it": "12.4.3",
+    "typescript": "3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^3.0.0",
+    "react-navigation": "^4.0.0",
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": "^1.0.0",
-    "react-navigation": "^3.0.0"
+    "react-native-reanimated": "^1.0.0"
   },
   "prettier": {
     "trailingComma": "es5",

packages/animated-switch/src/index.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react';
 import { StyleSheet, ViewStyle } from 'react-native';
-import {
-  NavigationProp,
-  NavigationDescriptor,
-  NavigationState,
-  NavigationRouteConfigMap,
-  ScreenProps,
-  NavigationContainer,
-  SwitchNavigatorConfig,
-} from 'react-navigation';
 import {
   createNavigator,
+  CreateNavigatorConfig,
+  NavigationDescriptor,
+  NavigationParams,
+  NavigationProp,
+  NavigationRoute,
+  NavigationRouteConfigMap,
+  NavigationScreenProp,
+  NavigationState,
+  NavigationSwitchProp,
+  NavigationSwitchRouterConfig,
   SceneView,
   SwitchRouter,
-} from '@react-navigation/core';
+  SupportedThemes,
+  NavigationScreenConfig,
+} from 'react-navigation';
 import {
   TransitioningView,
   Transitioning,
@@ -27,19 +30,20 @@ const DEFAULT_TRANSITION = (
   </Transition.Together>
 );
 
-interface Props {
-  navigationConfig: {
-    transition?: React.ReactNode;
-    transitionViewStyle?: ViewStyle;
-  };
+type Props = {
+  navigationConfig: NavigationAnimatedSwitchConfig;
   navigation: NavigationProp<NavigationState>;
-  descriptors: { [key: string]: NavigationDescriptor };
-  screenProps?: ScreenProps;
-}
-
-class AnimatedSwitchView extends React.Component<Props, {}> {
-  containerRef = React.createRef<TransitioningView>();
+  descriptors: {
+    [key: string]: NavigationDescriptor<
+      NavigationParams,
+      NavigationAnimatedSwitchOptions,
+      NavigationSwitchProp<NavigationRoute, any>
+    >;
+  };
+  screenProps?: unknown;
+};
 
+class AnimatedSwitchView extends React.Component<Props> {
   componentDidUpdate(prevProps: Props) {
     const { state: prevState } = prevProps.navigation;
     const prevActiveKey = prevState.routes[prevState.index].key;
@@ -51,8 +55,10 @@ class AnimatedSwitchView extends React.Component<Props, {}> {
     }
   }
 
+  private containerRef = React.createRef<TransitioningView>();
+
   render() {
-    const { navigationConfig } = this.props;
+    const { navigationConfig, screenProps } = this.props;
     const { state } = this.props.navigation;
     const activeKey = state.routes[state.index].key;
     const descriptor = this.props.descriptors[activeKey];
@@ -72,25 +78,62 @@ class AnimatedSwitchView extends React.Component<Props, {}> {
         <SceneView
           component={ChildComponent}
           navigation={descriptor.navigation}
-          screenProps={this.props.screenProps}
+          screenProps={screenProps}
         />
       </Transitioning.View>
     );
   }
 }
 
-export interface AnimatedSwitchNavigatorConfig extends SwitchNavigatorConfig {
+export type NavigationAnimatedSwitchConfig = NavigationSwitchRouterConfig & {
   transition?: React.ReactNode;
   transitionViewStyle?: ViewStyle;
-}
+};
+
+export type NavigationAnimatedSwitchOptions = {};
+
+export type NavigationAnimatedSwitchProp<
+  State = NavigationRoute,
+  Params = NavigationParams
+> = NavigationScreenProp<State, Params> & {
+  jumpTo: (routeName: string, key?: string) => void;
+};
+
+export type NavigationAnimatedSwitchScreenProps<
+  Params = NavigationParams,
+  ScreenProps = unknown
+> = {
+  theme: SupportedThemes;
+  navigation: NavigationAnimatedSwitchProp<NavigationRoute, Params>;
+  screenProps: ScreenProps;
+};
+
+export type NavigationAnimatedSwitchScreenComponent<
+  Params = NavigationParams,
+  ScreenProps = unknown
+> = React.ComponentType<
+  NavigationAnimatedSwitchScreenProps<Params, ScreenProps>
+> & {
+  navigationOptions?: NavigationScreenConfig<
+    NavigationAnimatedSwitchOptions,
+    NavigationAnimatedSwitchProp<NavigationRoute, Params>,
+    ScreenProps
+  >;
+};
 
 export default function createAnimatedSwitchNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  switchConfig: SwitchNavigatorConfig & {
-    transition?: React.ReactNode;
-  }
-): NavigationContainer {
+  routeConfigMap: NavigationRouteConfigMap<{}, NavigationAnimatedSwitchProp>,
+  switchConfig: CreateNavigatorConfig<
+    NavigationAnimatedSwitchConfig,
+    NavigationSwitchRouterConfig,
+    NavigationAnimatedSwitchOptions,
+    NavigationAnimatedSwitchProp<NavigationRoute, any>
+  > = {}
+) {
   const router = SwitchRouter(routeConfigMap, switchConfig);
+
+  // TODO: don't have time to fix it right now
+  // @ts-ignore
   const Navigator = createNavigator(AnimatedSwitchView, router, switchConfig);
 
   return Navigator;

packages/animated-switch/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "react-navigation-animated-switch": ["./src/index"]
+    },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "alwaysStrict": true,
@@ -20,8 +24,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext",
-    "plugins": [{ "name": "typescript-tslint-plugin" }]
+    "target": "esnext"
   },
   "typeAcquisition": {
     "enable": true,