diff --git a/README.md b/README.md index ccd3fe01..552ae093 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Build Status][travis-image]][travis-url] [![npm version][npm-image]][npm-url] -![gzipped size](https://img.shields.io/badge/gzipped-~23k-blue.svg) +![gzipped size](https://img.shields.io/badge/gzipped-~36.4k-blue.svg) [React Native][react-native-url] components and APIs for the Web. diff --git a/docs/guides/known-issues.md b/docs/guides/known-issues.md index 944d382e..7c223315 100644 --- a/docs/guides/known-issues.md +++ b/docs/guides/known-issues.md @@ -12,17 +12,10 @@ cases it will be necessary to use a Web counterpart. ## Missing component props There are properties that do not work across all platforms. All web-specific -props are annotated with `(web)` in the documentaiton. +props are annotated with `(web)` in the documentation. ## Platform parity There are some known issues in React Native where APIs could be made more consistent between platforms. For example, React Native for Web includes `ActivityIndicator` and a horizontal `ProgressBar`. - -Other parts of React Native, such as the `Animated` and `PanResponder` APIs, -are highly complex and have not yet been ported to React Native for Web. Given -the difficulties keeping these APIs in sync with React Native, we'd prefer the -APIs to be published as separate npm packages. If not, we will consider a web -implementation, possibly using the [Web Animations -API/polyfill](https://github.com/web-animations/web-animations-js) diff --git a/docs/guides/react-native.md b/docs/guides/react-native.md index f07517f0..cb0e24da 100644 --- a/docs/guides/react-native.md +++ b/docs/guides/react-native.md @@ -1,8 +1,5 @@ # React Native -This is an experimental feature to support: using community-developed React -Native components on the Web; and rendering React Native apps to Web. - Use a module loader that supports package aliases (e.g., webpack), and alias `react-native` to `react-native-web`. @@ -10,6 +7,7 @@ Use a module loader that supports package aliases (e.g., webpack), and alias // webpack.config.js module.exports = { + // ... resolve: { alias: { 'react-native': 'react-native-web' @@ -18,8 +16,7 @@ module.exports = { } ``` -Web-specific implementations can use the `*.web.js` naming pattern, which -webpack will resolve. +## Web-specific code Minor platform differences can use the `Platform` module. @@ -38,3 +35,25 @@ if (Platform.OS === 'web') { }); } ``` + +More substantial Web-specific implementation code should be written in files +with the extension `.web.js`, which webpack will automatically resolve. + +## Optimizations + +Production builds can benefit from dead-code elimination by defining the +following variables: + +```js +// webpack.config.js + +module.exports = { + // ... + plugins: [ + new webpack.DefinePlugin({ + 'Platform.OS': 'web', + 'process.env.NODE_ENV': JSON.stringify('production') + }) + } +} +```