ERROR in ./node_modules/react-navigation/lib-rn/views/SafeAreaView.js
Module not found: Error: Can't resolve 'react-native-web/dist/exports/DeviceInfo' in '/Users/raarts/work/app/node_modules/react-navigation/lib-rn/views'
 @ ./node_modules/react-navigation/lib-rn/views/SafeAreaView.js 1:1307-1358
 @ ./node_modules/react-navigation/lib-rn/react-navigation.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./node_modules/react-native-tab-view/src/TabViewPagerAndroid.js
Module not found: Error: Can't resolve 'react-native-web/dist/exports/ViewPagerAndroid' in '/Users/raarts/work/app/node_modules/react-native-tab-view/src'
 @ ./node_modules/react-native-tab-view/src/TabViewPagerAndroid.js 1:1046-1103
 @ ./node_modules/react-native-tab-view/src/index.js
 @ ./node_modules/react-navigation/lib-rn/views/TabView/TabView.js
 @ ./node_modules/react-navigation/lib-rn/react-navigation.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

{
  "name": "app",
  "version": "0.1.0",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "css-loader": "^0.28.9",
    "expo": "^25.0.0",
    "hoist-non-react-statics": "^2.3.1",
    "i18next": "^10.2.2",
    "jest-expo": "^25.0.0",
    "jwt-decode": "^2.2.0",
    "prop-types": "^15.6.0",
    "qs": "^6.5.1",
    "query-string": "^5.0.1",
    "react": "16.2.0",
    "react-dom": "16.0.0",
    "react-i18next": "^7.3.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-dotenv": "^0.1.1",
    "react-native-dropdownalert": "^3.2.0",
    "react-native-extended-stylesheet": "^0.8.0",
    "react-native-login-keycloak": "^1.0.2",
    "react-native-web": "^0.4.0",
    "react-navigation": "^1.0.0-beta.27",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.17",
    "reactotron-react-js": "^1.13.0",
    "reactotron-react-native": "^1.14.0",
    "redux": "^3.7.2",
    "redux-persist": "^5.5.0",
    "url-parse": "^1.2.0",
    "uuid": "^3.2.1"
  },
  "scripts": {
    "start": "sed -i -e 's:lib/react-navigation.web.js:lib-rn/react-navigation.js:g' ./node_modules/react-navigation/package.json; ./node_modules/.bin/webpack-dev-server -d --config ./webpack.config.js  --inline --hot --colors --content-base public/",
    "build": "sed -i -e 's:lib/react-navigation.web.js:lib-rn/react-navigation.js:g' ./node_modules/react-navigation/package.json; NODE_ENV=production ./node_modules/.bin/webpack -p --config ./webpack.config.js",
    "test": "node node_modules/jest/bin/jest.js --watch",
    "eject": "react-scripts eject",
    "lint": "eslint --ignore-path .gitignore .",
    "lint:fix": "eslint . --ignore-path .gitignore --fix",
    "prettier": "prettier --write '*.js'",
    "format-code": "yarn run prettier && yarn run lint:fix",
    "precommit": "lint-staged"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "lint-staged": {
    "*.js": [
      "yarn run format-code",
      "git add"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-native-web": "^0.4.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "husky": "^0.14.3",
    "lint-staged": "^6.0.0",
    "prettier": "1.9.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

// web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, './');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-navigation'),
    path.resolve(appDirectory, 'node_modules/react-native-tab-view'),
    path.resolve(appDirectory, 'node_modules/react-clone-referenced-element'),
    path.resolve(appDirectory, 'node_modules/react-native-extended-stylesheet'),
    path.resolve(appDirectory, 'node_modules/react-native-dropdownalert'),
    path.resolve(appDirectory, 'node_modules/reactotron-react-native'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // Babel configuration (or use .babelrc)
      // This aliases 'react-native' to 'react-native-web' and includes only
      // the modules needed by the app.
      plugins: ['react-native-web', 'transform-runtime'],
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['react-native'],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

// This is needed for loading css
const cssLoaderConfiguration = {
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
};

module.exports = {
  // your web-specific entry file
  entry: path.resolve(appDirectory, 'src/index.js'),

  // configures where the build ends up
  output: {
    filename: 'bundle.js',
    publicPath: '/assets/',
    path: path.resolve(appDirectory, './public/assets'),
  },

  module: {
    rules: [
      babelLoaderConfiguration,
      cssLoaderConfiguration,
      imageLoaderConfiguration,
    ],
  },

  plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV === 'production' || true,
    }),
  ],

  resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js'],
    alias: {
      'react-native': 'react-native-web',
    },
  },
};

{
  "presets": ["babel-preset-expo", "react-native-dotenv"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}