Skip to content
GitLab

Use babel-plugin-react-native-web

Closed Administrator requested to merge github/fork/paularmstrong/parmstrong/rnw-babel-plugin into next

Created by: paularmstrong

Fixes necolas/react-native-web#629

Problem: Current support for react-native-web uses a webpack alias. This causes the entirety of react-native-web to be bundled when building for production. Unfortunately, this means that every single module, used or not, will be bundled. This can grow app sizes by upwards of 50KiB without any benefit.

Solution: react-native-web publishes a babel plugin that handles aliasing of react-native -> react-native-web and also swaps the import paths so that it doesn't import the entire app, but just the specific modules used. Info at necolas/react-native-web/packages/babel-plugin-react-native-web

Test Plan:

  1. run yarn create-react-app test
  2. cd test && yarn add react-native-web
  3. Add import { View } from 'react-native'; to App.js and use it in place of any div
  4. yarn test
  5. yarn start
  6. yarn build
  7. yarn eject and repeat steps 4-6

NOTE: AppVeyor failure looks like a fluke. Can anyone verify?