mirror of
https://github.com/zoriya/react-native-web.git
synced 2025-12-06 06:36:13 +00:00
Update documentation for 0.16
This commit is contained in:
Nicolas Gallagher
@@ -6,7 +6,7 @@
|
||||
|
||||
## Documentation
|
||||
|
||||
The [documentation site](https://necolas.github.com/react-native-web/) covers installation, guides, and APIs.
|
||||
The [documentation site](https://necolas.github.io/react-native-web/) covers installation, guides, and APIs.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/i18n-manager/index.html
|
||||
eleventyNavigation:
|
||||
key: I18nManager
|
||||
parent: APIs
|
||||
label: "Change"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/linking/index.html
|
||||
eleventyNavigation:
|
||||
key: Linking
|
||||
parent: APIs
|
||||
label: "Change"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/modal/index.html
|
||||
eleventyNavigation:
|
||||
key: Modal
|
||||
parent: Components
|
||||
label: "New"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/pressable/index.html
|
||||
eleventyNavigation:
|
||||
key: Pressable
|
||||
parent: Components
|
||||
label: "New"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/text/index.html
|
||||
eleventyNavigation:
|
||||
key: Text
|
||||
parent: Components
|
||||
label: "Change"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/view/index.html
|
||||
eleventyNavigation:
|
||||
key: View
|
||||
parent: Components
|
||||
label: "Change"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,6 @@ permalink: /docs/accessibility/index.html
|
||||
eleventyNavigation:
|
||||
key: Accessibility
|
||||
parent: Concepts
|
||||
label: "Change"
|
||||
---
|
||||
|
||||
{% import "fragments/macros.html" as macro with context %}
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: /docs/browser-compatibility/index.html
|
||||
eleventyNavigation:
|
||||
key: Browser compatibility
|
||||
parent: Start
|
||||
order: 3
|
||||
order: 4
|
||||
---
|
||||
|
||||
:::lead
|
||||
|
||||
@@ -6,7 +6,7 @@ description:
|
||||
eleventyNavigation:
|
||||
key: Help
|
||||
parent: Start
|
||||
order: 5
|
||||
order: 6
|
||||
---
|
||||
|
||||
:::lead
|
||||
|
||||
@@ -22,7 +22,7 @@ React Native for Web is a compatibility layer between React DOM and React Native
|
||||
|
||||
## Modern Web
|
||||
|
||||
{{ site.name }} makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does {{ site.name }}. Although certains APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.
|
||||
{{ site.name }} makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does {{ site.name }}. Although certain APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.
|
||||
|
||||
## Components
|
||||
|
||||
|
||||
@@ -3,104 +3,18 @@ title: Multi-platform setup
|
||||
date: Last Modified
|
||||
permalink: /docs/multi-platform/index.html
|
||||
eleventyNavigation:
|
||||
key: Multi-platform
|
||||
key: Multi-platform setup
|
||||
parent: Start
|
||||
order: 2
|
||||
order: 3
|
||||
---
|
||||
|
||||
:::lead
|
||||
An overview of how to integrate React Native for Web into an existing React Native codebase.
|
||||
How to integrate React Native for Web into an existing React Native codebase.
|
||||
:::
|
||||
|
||||
If you are interested in making a multi-platform app it is strongly recommended that you use Expo (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/) and takes care of all the configuration work required.
|
||||
Please read the [setup]({{ '/docs/setup' | url }}) guide first. If you have an existing React Native application, there are more areas that require attention and customization before most web bundlers can consume the non-standard JavaScript in packages produced by the React Native ecosystem. Additionally, 3rd party React Native packages with web support are listed in the [React Native Directory](https://reactnative.directory/?web=true).
|
||||
|
||||
If you have an existing application, this guide will surface the areas that require attention and customization before most web bundlers can consume the non-standard JavaScript in packages produced by the React Native ecosystem. Additionally, 3rd party React Native packages with web support are listed in the [React Native Directory](https://reactnative.directory/?web=true).
|
||||
|
||||
---
|
||||
|
||||
## Package aliasing
|
||||
|
||||
### Bundler
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Compiler
|
||||
|
||||
[Babel](https://babeljs.io/) supports module aliasing using [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
|
||||
|
||||
```js
|
||||
{
|
||||
"plugins": [
|
||||
["module-resolver", {
|
||||
"alias": {
|
||||
"^react-native$": "react-native-web"
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 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. Please refer to the Jest documentation for more information.
|
||||
|
||||
```js
|
||||
{
|
||||
"preset": "react-native-web"
|
||||
}
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
[Flow](https://flow.org) can be configured to understand the aliased module and pull types from Reac Native Web's source code. To do this, you can alias the name as below. You will also need to tell flow to use the `module` field of RNW's `package.json` or it may not find the flow types.
|
||||
|
||||
```yml
|
||||
[options]
|
||||
module.system.node.main_field=module
|
||||
module.system.node.main_field=main
|
||||
module.name_mapper='^react-native$' -> 'react-native-web'
|
||||
```
|
||||
|
||||
### Node.js
|
||||
|
||||
Node.js can alias `react-native` to `react-native-web` using [`module-alias`](https://www.npmjs.com/package/module-alias). This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).
|
||||
|
||||
```js
|
||||
// Install the `module-alias` package as a dependency first
|
||||
const moduleAlias = require("module-alias");
|
||||
moduleAlias.addAliases({
|
||||
"react-native": require.resolve("react-native-web"),
|
||||
});
|
||||
moduleAlias();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Root element
|
||||
|
||||
Full-screen React Native apps may require the following styles inlined in the HTML document shell. ([Example](https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644).)
|
||||
|
||||
```css
|
||||
/* These styles make the body full-height */
|
||||
html, body { height: 100%; }
|
||||
/* These styles disable body scrolling if you are using <ScrollView> */
|
||||
body { overflow: hidden; }
|
||||
/* These styles make the root element full-height */
|
||||
#root { display:flex; height:100%; }
|
||||
```
|
||||
If you are interested in making a multi-platform app it is *strongly recommended* that you use [Expo](https://expo.io) (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/) and takes care of all the configuration work required.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: /docs/react-native-compatibility/index.html
|
||||
eleventyNavigation:
|
||||
key: React Native compatibility
|
||||
parent: Start
|
||||
order: 4
|
||||
order: 5
|
||||
---
|
||||
|
||||
:::lead
|
||||
|
||||
125
packages/docs/src/pages/docs/getting-started/setup.md
Normal file
125
packages/docs/src/pages/docs/getting-started/setup.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: Setup
|
||||
date: Last Modified
|
||||
permalink: /docs/setup/index.html
|
||||
eleventyNavigation:
|
||||
key: Setup
|
||||
parent: Start
|
||||
order: 2
|
||||
---
|
||||
|
||||
:::lead
|
||||
How to integrate React Native for Web with various development tools.
|
||||
:::
|
||||
|
||||
Find out about package aliasing, package optimization, using types, and customizing the app's HTML shell.
|
||||
|
||||
---
|
||||
|
||||
## Package aliasing
|
||||
|
||||
### Bundler
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Compiler
|
||||
|
||||
[Babel](https://babeljs.io/) supports module aliasing using [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
|
||||
|
||||
```js
|
||||
{
|
||||
"plugins": [
|
||||
["module-resolver", {
|
||||
"alias": {
|
||||
"^react-native$": "react-native-web"
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 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. Please refer to the Jest documentation for more information.
|
||||
|
||||
```js
|
||||
{
|
||||
"preset": "react-native-web"
|
||||
}
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
[Flow](https://flow.org) can be configured to understand the aliased module
|
||||
|
||||
```yml
|
||||
[options]
|
||||
# Alias the package name
|
||||
module.name_mapper='^react-native$' -> 'react-native-web'
|
||||
```
|
||||
|
||||
### Node.js
|
||||
|
||||
Node.js can alias `react-native` to `react-native-web` using [`module-alias`](https://www.npmjs.com/package/module-alias). This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).
|
||||
|
||||
```js
|
||||
// Install the `module-alias` package as a dependency first
|
||||
const moduleAlias = require("module-alias");
|
||||
moduleAlias.addAliases({
|
||||
"react-native": require.resolve("react-native-web"),
|
||||
});
|
||||
moduleAlias();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Package optimization
|
||||
|
||||
The project's Babel plugin (see [Installation]({{ '/docs/installation' | url }})) is recommended for build-time optimizations and to prune modules not used by your application.
|
||||
|
||||
```js
|
||||
{
|
||||
"plugins": ['react-native-web']
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Types
|
||||
|
||||
Flow can be configured to pull types from React Native for Web's source code.
|
||||
|
||||
```yml
|
||||
[options]
|
||||
# Point flow to the 'module' field by default
|
||||
module.system.node.main_field=module
|
||||
module.system.node.main_field=main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Root element
|
||||
|
||||
Full-screen React Native apps with a root `<ScrollView>` may require the following styles inlined in the HTML document shell. ([Example](https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644).)
|
||||
|
||||
```css
|
||||
/* These styles make the body full-height */
|
||||
html, body { height: 100%; }
|
||||
/* These styles disable body scrolling if you are using <ScrollView> */
|
||||
body { overflow: hidden; }
|
||||
/* These styles make the root element full-height */
|
||||
#root { display:flex; height:100%; }
|
||||
```
|
||||
Reference in New Issue
Block a user