chore: configure bob and metro

packages/stack/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["react-native"]
-}

packages/stack/.circleci/config.yml

@@ -21,8 +21,8 @@ jobs:
             - v1-dependencies-example-{{ checksum "example/package.json" }}
             - v1-dependencies-example-
       - run: |
-          yarn install
-          yarn install --cwd example
+          yarn install --frozen-lockfile
+          yarn install --frozen-lockfile --cwd example
       - save_cache:
           key: v1-dependencies-{{ checksum "package.json" }}
           paths: node_modules
@@ -44,10 +44,16 @@ jobs:
       steps:
         - attach_workspace:
             at: ~/project
-        - run: yarn test -- --coverage
+        - run: yarn test --coverage
         - store_artifacts:
             path: coverage
             destination: coverage
+  build:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: yarn prepare
 
 workflows:
   version: 2
@@ -60,3 +66,6 @@ workflows:
       - unit-tests:
           requires:
             - install-dependencies
+      - build:
+          requires:
+            - install-dependencies

packages/stack/.eslintignore

@@ -1,3 +1,3 @@
 node_modules/
-dist/
-jest-setup.js
+coverage/
+lib/

packages/stack/.gitignore

@@ -51,3 +51,6 @@ android/keystores/debug.keystore
 
 # Build
 dist/
+
+# generated by bob
+lib/

packages/stack/.release-it.json

@@ -1,8 +1,9 @@
 {
   "increment": "conventional:angular",
-  "changelogCommand": "conventional-changelog -p angular | tail -n +3",
-  "safeBump": false,
-  "src": {
+  "scripts": {
+    "changelog": "conventional-changelog -p angular | tail -n +3"
+  },
+  "git": {
     "commitMessage": "chore: release %s",
     "tagName": "v%s"
   },

packages/stack/babel.config.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

packages/stack/commitlint.config.js

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

packages/stack/example/.babelrc

@@ -1,5 +1,12 @@
 {
   "presets": [
     "expo"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "react-navigation-stack": "../src/index"
+      }
+    }]
   ]
 }

packages/stack/example/.eslintrc

@@ -1,11 +1,17 @@
 {
-  "extends": "../.eslintrc",
+  'extends': '../.eslintrc',
 
-  "settings": {
-    "import/core-modules": [ "expo", "react-navigation-stack" ]
-  },
+  'settings':
+    {
+      'import/core-modules':
+        [
+          'react-navigation-stack',
+          'react-native-gesture-handler',
+          'react-native-vector-icons',
+        ],
+    },
 
   "rules": {
-    "react/prop-types": "off"
+    "react-native/no-inline-styles": "off"
   }
 }

packages/stack/example/app.json

@@ -5,6 +5,10 @@
     "slug": "react-navigation-stack-demo",
     "sdkVersion": "32.0.0",
     "version": "1.0.0",
-    "primaryColor": "#2196f3"
+    "primaryColor": "#2196f3",
+    "packagerOpts": {
+      "config": "./metro.config.js",
+      "projectRoots": ""
+    }
   }
 }

packages/stack/example/metro.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const project = require('../package.json');
+const escape = require('escape-string-regexp');
+
+const projectDependencies = Object.keys({
+  ...project.dependencies,
+  ...project.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(
+        `^${escape(
+          path.resolve(__dirname, 'node_modules', project.name)
+        )}\\/.*$`
+      ),
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
+      ),
+    ]),
+
+    providesModuleNodeModules: [
+      '@expo/vector-icons',
+      '@babel/runtime',
+      ...projectDependencies,
+    ],
+  },
+};

packages/stack/example/package.json

@@ -6,24 +6,20 @@
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
-    "ios": "expo start --ios",
-    "postinstall": "rm -rf node_modules/react-navigation-stack/{.git,node_modules,example}"
+    "ios": "expo start --ios"
   },
   "dependencies": {
+    "@react-navigation/core": "^3.3.1",
+    "@react-navigation/native": "^3.4.1",
+    "expo": "32.0.6",
+    "hoist-non-react-statics": "^3.3.0",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-paper": "^2.2.0",
-    "react-navigation-stack": "../",
-    "react-navigation-drawer": "^1.1.0",
-    "react-navigation-tabs": "*",
-    "@react-navigation/core": "^3.0.0",
-    "@react-navigation/native": "^3.1.1",
-    "expo": "32.0.0",
-    "hoist-non-react-statics": "^2.5.0",
-    "prop-types": "^15.6.0"
+    "react-native-paper": "^2.15.2",
+    "react-navigation-drawer": "^1.2.1",
+    "react-navigation-tabs": "*"
   },
   "devDependencies": {
-    "babel-plugin-module-resolver": "^3.0.0",
-    "glob-to-regexp": "^0.3.0"
+    "babel-plugin-module-resolver": "^3.2.0"
   }
 }

packages/stack/jest-setup.js

@@ -1,10 +1,6 @@
-/**
- * eslint-env jest
- */
+/* eslint-env jest */
 
 jest.mock('react-native-gesture-handler', () => ({
   PanGestureHandler: 'PanGestureHandler',
   BaseButton: 'BaseButton',
 }));
-
-import React from 'react';

packages/stack/package.json

@@ -2,24 +2,22 @@
   "name": "react-navigation-stack",
   "version": "1.3.0",
   "description": "Stack navigator component for React Navigation",
-  "main": "dist/index.js",
-  "module": "src/index.web.js",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "react-native": "src/index.js",
   "sideEffects": false,
   "files": [
-    "dist/",
-    "src/",
-    "LICENSE.md",
-    "README.md"
+    "src",
+    "lib"
   ],
-  "react-native": "src/index.js",
   "scripts": {
     "test": "jest",
     "lint": "eslint .",
     "format": "eslint . --fix",
-    "build": "babel --no-babelrc --plugins=syntax-jsx,syntax-class-properties,syntax-object-rest-spread,transform-flow-strip-types src --copy-files --out-dir dist --ignore '**/__tests__/**'",
-    "dev": "yarn build --watch --out-dir example/node_modules/react-navigation-stack/dist",
-    "prepare": "yarn build",
-    "release": "release-it"
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn && yarn example"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,30 +41,28 @@
   },
   "homepage": "https://github.com/react-navigation/react-navigation-stack#readme",
   "devDependencies": {
-    "@expo/vector-icons": "^6.2.0",
-    "@react-navigation/core": "^3.0.0",
-    "@react-navigation/native": "^3.0.0",
-    "babel-cli": "^6.26.0",
-    "babel-jest": "^22.4.1",
-    "babel-plugin-syntax-class-properties": "^6.13.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-preset-react-native": "^4.0.0",
-    "conventional-changelog-cli": "^2.0.5",
-    "eslint": "^4.12.1",
-    "eslint-config-satya164": "^1.0.1",
+    "@babel/core": "^7.4.3",
+    "@commitlint/config-conventional": "^7.5.0",
+    "@expo/vector-icons": "^10.0.1",
+    "@react-native-community/bob": "^0.3.4",
+    "@react-navigation/core": "^3.3.1",
+    "@react-navigation/native": "^3.4.1",
+    "commitlint": "^7.5.2",
+    "conventional-changelog-cli": "^2.0.12",
+    "eslint": "^5.16.0",
+    "eslint-config-satya164": "^2.4.1",
     "eslint-plugin-react-native-globals": "^0.1.0",
-    "husky": "^0.14.3",
-    "jest": "^23.6.0",
-    "prettier": "^1.8.2",
-    "react": "16.6.3",
-    "react-dom": "16.3.3",
-    "react-native": "^0.57.7",
-    "react-native-gesture-handler": "^1.0.8",
-    "react-native-screens": "^1.0.0-alpha",
-    "react-test-renderer": "16.6.3",
-    "release-it": "^7.6.1"
+    "husky": "^1.3.1",
+    "jest": "^24.7.1",
+    "prettier": "^1.17.0",
+    "react": "16.5.0",
+    "react-dom": "16.5.0",
+    "react-native": "~0.57.7",
+    "react-native-gesture-handler": "^1.1.0",
+    "react-native-screens": "^1.0.0-alpha.22",
+    "react-test-renderer": "16.5.0",
+    "release-it": "^10.4.2",
+    "scheduler": "^0.14.0"
   },
   "peerDependencies": {
     "@react-navigation/core": "^3.0.0",
@@ -86,7 +82,8 @@
       "jest-setup.js"
     ],
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/"
+      "<rootDir>/example/",
+      "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"
@@ -95,5 +92,19 @@
   "prettier": {
     "trailingComma": "es5",
     "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint && yarn test",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module"
+    ]
   }
 }

packages/stack/src/index.js

@@ -1,63 +1,41 @@
-/* eslint-disable import/no-commonjs */
 import { Platform } from 'react-native';
 
-module.exports = {
-  /**
-   * Navigators
-   */
-  get createStackNavigator() {
-    return require('./navigators/createStackNavigator').default;
-  },
+/**
+ * Navigators
+ */
+export {
+  default as createStackNavigator,
+} from './navigators/createStackNavigator';
 
-  /**
-   * Views
-   */
-  get Assets() {
-    return Platform.select({
-      ios: [
-        require('./views/assets/back-icon.png'),
-        require('./views/assets/back-icon-mask.png'),
-      ],
-      default: [require('./views/assets/back-icon.png')],
-    });
-  },
-  get Header() {
-    return require('./views/Header/Header').default;
-  },
-  get HeaderBackButton() {
-    return require('./views/Header/HeaderBackButton').default;
-  },
-  get HeaderTitle() {
-    return require('./views/Header/HeaderTitle').default;
-  },
-  get HeaderStyleInterpolator() {
-    return require('./views/Header/HeaderStyleInterpolator').default;
-  },
-  get StackView() {
-    return require('./views/StackView/StackView').default;
-  },
-  get StackViewCard() {
-    return require('./views/StackView/StackViewCard').default;
-  },
-  get StackViewLayout() {
-    return require('./views/StackView/StackViewLayout').default;
-  },
-  get StackViewStyleInterpolator() {
-    return require('./views/StackView/StackViewStyleInterpolator').default;
-  },
-  get StackViewTransitionConfigs() {
-    return require('./views/StackView/StackViewTransitionConfigs').default;
-  },
-  get createPointerEventsContainer() {
-    return require('./views/StackView/createPointerEventsContainer').default;
-  },
-  get Transitioner() {
-    return require('./views/Transitioner').default;
-  },
-  get ScenesReducer() {
-    return require('./views/ScenesReducer').default;
-  },
-  get StackGestureContext() {
-    return require('./utils/StackGestureContext').default;
-  },
-};
+export const Assets = Platform.select({
+  ios: [
+    require('./views/assets/back-icon.png'),
+    require('./views/assets/back-icon-mask.png'),
+  ],
+  default: [require('./views/assets/back-icon.png')],
+});
+
+/**
+ * Views
+ */
+export { default as Header } from './views/Header/Header';
+export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
+export { default as HeaderTitle } from './views/Header/HeaderTitle';
+export {
+  default as HeaderStyleInterpolator,
+} from './views/Header/HeaderStyleInterpolator';
+export { default as StackView } from './views/StackView/StackView';
+export { default as StackViewCard } from './views/StackView/StackViewCard';
+export { default as StackViewLayout } from './views/StackView/StackViewLayout';
+export {
+  default as StackViewStyleInterpolator,
+} from './views/StackView/StackViewStyleInterpolator';
+export {
+  default as StackViewTransitionConfigs,
+} from './views/StackView/StackViewTransitionConfigs';
+export {
+  default as createPointerEventsContainer,
+} from './views/StackView/createPointerEventsContainer';
+export { default as Transitioner } from './views/Transitioner';
+export { default as ScenesReducer } from './views/ScenesReducer';
+export { default as StackGestureContext } from './utils/StackGestureContext';

packages/stack/src/views/BorderlessButton.js

@@ -1,16 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Animated, Platform } from 'react-native';
 import { BaseButton } from 'react-native-gesture-handler';
 
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
 export default class BorderlessButton extends React.Component {
-  static propTypes = {
-    ...BaseButton.propTypes,
-    borderless: PropTypes.bool,
-  };
-
   static defaultProps = {
     activeOpacity: 0.3,
     borderless: true,

packages/stack/src/views/Header/Header.js

@@ -169,12 +169,14 @@ class Header extends React.PureComponent {
     const onLayout =
       layoutPreset === 'center'
         ? e => {
-            this.setState({
+            const { width } = e.nativeEvent.layout;
+
+            this.setState(state => ({
               widths: {
-                ...this.state.widths,
-                [props.scene.key]: e.nativeEvent.layout.width,
+                ...state.widths,
+                [props.scene.key]: width,
               },
-            });
+            }));
           }
         : undefined;
 
@@ -189,8 +191,10 @@ class Header extends React.PureComponent {
         style={[
           color ? { color } : null,
           layoutPreset === 'center'
-            ? { textAlign: 'center' }
-            : { textAlign: 'left' },
+            ? // eslint-disable-next-line react-native/no-inline-styles
+              { textAlign: 'center' }
+            : // eslint-disable-next-line react-native/no-inline-styles
+              { textAlign: 'left' },
           titleStyle,
         ]}
       >

packages/stack/src/views/__tests__/Transitioner-test.js

@@ -5,7 +5,7 @@ import Transitioner from '../Transitioner';
 
 describe('Transitioner', () => {
   // TODO: why does this fail here but not when it was part of react-navigation repo?
-  xit('should not trigger onTransitionStart and onTransitionEnd when route params are changed', () => {
+  it.skip('should not trigger onTransitionStart and onTransitionEnd when route params are changed', () => {
     const onTransitionStartCallback = jest.fn();
     const onTransitionEndCallback = jest.fn();