diff --git a/README.md b/README.md index 8a236236..aac20768 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,6 @@ [![Build Status][travis-image]][travis-url] [![npm version][npm-image]][npm-url] -![gzipped size](https://img.shields.io/badge/gzipped-~48.6k-blue.svg) [React Native][react-native-url] components and APIs for the Web. @@ -13,17 +12,18 @@ Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge. "React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web. -React Native provides a foundational layer to support interoperable, -zero-configuration React component development. This is missing from React's -web ecosystem where OSS components rely on inline styles (usually without -vendor prefixes), or require build tool configuration. This project allows -components built upon React Native to be run on the Web, and it manages all -component styling out-of-the-box. +React Native – unlike React DOM – is a comprehensive UI framework for +application developers. React Native's components are higher-level building +blocks than those provided by React DOM. React Native also provides +platform-agnostic JavaScript APIs for animating and styling components, +responding to touch events, and interacting with the host environment. -For example, the [`View`](docs/components/View.md) component makes it easy to build -cross-browser layouts with flexbox, such as stacked and nested boxes with -margin and padding. And the [`StyleSheet`](docs/guides/style.md) API converts -styles defined in JavaScript into "Atomic CSS". +Bringing the React Native APIs and components to the Web allows React Native +components to be run on the Web platform. But it also solves several problems +facing the React DOM ecosystem: no framework-level animation or styling +solution; difficulty sharing and composing UI components (without pulling in +their build or runtime dependencies); and the lack of high-level base +components. ## Quick start diff --git a/core.js b/core.js new file mode 100644 index 00000000..019cec75 --- /dev/null +++ b/core.js @@ -0,0 +1 @@ +module.exports = require('./dist/core') diff --git a/docs/guides/rendering.md b/docs/guides/rendering.md index af6e0d72..8c94df83 100644 --- a/docs/guides/rendering.md +++ b/docs/guides/rendering.md @@ -16,6 +16,22 @@ module.exports = { } ``` +The `react-native-web` package also includes a `core` module that exports only +`ReactNative`, `Image`, `StyleSheet`, `Text`, `TextInput`, and `View`. + +```js +// webpack.config.js + +module.exports = { + // ...other configuration + resolve: { + alias: { + 'react-native': 'react-native-web/core' + } + } +} +``` + ## Client-side rendering Rendering without using the `AppRegistry`: diff --git a/src/core.js b/src/core.js new file mode 100644 index 00000000..1100e200 --- /dev/null +++ b/src/core.js @@ -0,0 +1,25 @@ +import './modules/injectResponderEventPlugin' + +import findNodeHandle from './modules/findNodeHandle' +import ReactDOM from 'react-dom' +import ReactDOMServer from 'react-dom/server' +import StyleSheet from './apis/StyleSheet' +import Image from './components/Image' +import Text from './components/Text' +import TextInput from './components/TextInput' +import View from './components/View' + +const ReactNativeCore = { + findNodeHandle, + render: ReactDOM.render, + renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup, + renderToString: ReactDOMServer.renderToString, + unmountComponentAtNode: ReactDOM.unmountComponentAtNode, + StyleSheet, + Image, + Text, + TextInput, + View +} + +module.exports = ReactNativeCore