mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-08-15 18:45:06 +00:00
117 lines
2.7 KiB
Markdown
117 lines
2.7 KiB
Markdown
# Getting started
|
|
|
|
This guide will help you render components and applications with React Native
|
|
for Web.
|
|
|
|
Your application may need to polyfill `Promise`, `Object.assign`, `Array.from`,
|
|
and [`ResizeObserver`](https://github.com/que-etc/resize-observer-polyfill) as
|
|
necessary for your desired browser support.
|
|
|
|
If you're not familiar with setting up a new React web project, please follow
|
|
the recommendations in the [React documentation](https://reactjs.org/).
|
|
|
|
## Install
|
|
|
|
```
|
|
yarn add react react-dom react-native-web
|
|
```
|
|
|
|
And if you need to use `ART`:
|
|
|
|
```
|
|
yarn add react-art
|
|
```
|
|
|
|
## Starter kits
|
|
|
|
Web: [create-react-app](https://github.com/facebookincubator/create-react-app)
|
|
includes built-in support for aliasing `react-native-web` to `react-native`.
|
|
|
|
```
|
|
create-react-app my-app
|
|
```
|
|
|
|
Multi-platform: [create-react-native-app](https://github.com/react-community/create-react-native-app)
|
|
includes experimental support for Web.
|
|
|
|
```
|
|
create-react-native-app my-app --with-web-support
|
|
```
|
|
|
|
## Configuring a module bundler
|
|
|
|
If you have a custom setup, you may choose to configure your module bundler to
|
|
alias the package to `react-native`.
|
|
|
|
For example, modify your [webpack](https://github.com/webpack/webpack)
|
|
configuration as follows:
|
|
|
|
```js
|
|
// webpack.config.js
|
|
module.exports = {
|
|
// ...the rest of your config
|
|
|
|
resolve: {
|
|
alias: {
|
|
'react-native$': 'react-native-web'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Now you can create your components and applications with the React Native API.
|
|
|
|
## Configuring Babel
|
|
|
|
If you need to do the aliasing with Babel you can use
|
|
[babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
|
|
|
|
```
|
|
{
|
|
"plugins": [
|
|
["module-resolver", {
|
|
"alias": {
|
|
"^react-native$": "react-native-web"
|
|
}
|
|
}]
|
|
]
|
|
}
|
|
```
|
|
|
|
## Configuring Jest
|
|
|
|
[Jest](https://facebook.github.io/jest/) can be configured using the provided
|
|
preset. This will map `react-native` to `react-native-web` and provide
|
|
appropriate mocks:
|
|
|
|
```
|
|
{
|
|
"preset": "react-native-web"
|
|
}
|
|
```
|
|
|
|
Please refer to the Jest documentation for more information.
|
|
|
|
## Configuring Flow
|
|
|
|
[Flow](https://flow.org) can be configured to understand the aliased module:
|
|
|
|
```
|
|
[options]
|
|
module.name_mapper='^react-native$' -> 'react-native-web'
|
|
```
|
|
|
|
You may also need to include a custom libdef
|
|
([example](https://gist.github.com/paularmstrong/f60b40d16fc83e1e8e532d483336f9bb))
|
|
in your config.
|
|
|
|
## Other notes
|
|
|
|
### Safari flexbox performance
|
|
|
|
Safari prior to version 10.1 can suffer from extremely [poor flexbox
|
|
performance](https://bugs.webkit.org/show_bug.cgi?id=150445). The recommended
|
|
way to work around this issue (as used on mobile.twitter.com) is to set
|
|
`display:block` on Views in your element hierarchy that you know don't need
|
|
flexbox layout.
|