diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index fb402b75d1..327acb6640 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,8 @@ { - "packages": ["packages/react-native-web", "packages/babel-plugin-react-native-web"], + "packages": [ + "packages/react-native-web", + "packages/babel-plugin-react-native-web" + ], "buildCommand": "build", "sandboxes": ["/packages/react-native-web-examples/"], "node": "16" diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index a1965468aa..18d80b5388 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -1,6 +1,6 @@ name: Bug report description: File a bug report -labels: ["bug"] +labels: ['bug'] body: - type: markdown attributes: @@ -11,8 +11,8 @@ body: label: Is there an existing issue for this? description: Please search to see if an issue already exists for the bug you encountered. options: - - label: I have searched the existing issues - required: true + - label: I have searched the existing issues + required: true - type: textarea attributes: label: Describe the issue @@ -39,7 +39,7 @@ body: attributes: label: Test case description: Please provide a link to a reduced test case that reproduces the issue. - placeholder: "https://codesandbox.io/s/6lx6ql1w5r" + placeholder: 'https://codesandbox.io/s/6lx6ql1w5r' validations: required: true - type: textarea diff --git a/.github/ISSUE_TEMPLATE/feature.yml b/.github/ISSUE_TEMPLATE/feature.yml index 1a0ed58945..8f49622646 100644 --- a/.github/ISSUE_TEMPLATE/feature.yml +++ b/.github/ISSUE_TEMPLATE/feature.yml @@ -1,6 +1,6 @@ name: Feature request description: If you have a suggestion… -labels: ["enhancement"] +labels: ['enhancement'] body: - type: markdown attributes: @@ -11,8 +11,8 @@ body: label: Is there an existing request? description: Please search open and closed issues to see if this request has already been made. options: - - label: I have searched for this request - required: true + - label: I have searched for this request + required: true - type: textarea attributes: label: Describe the feature request diff --git a/.github/labels-config.yml b/.github/labels-config.yml index bb2785a1e1..d20551a62f 100644 --- a/.github/labels-config.yml +++ b/.github/labels-config.yml @@ -1,10 +1,10 @@ # Configuration for Label Actions - https://github.com/marketplace/actions/label-actions -"needs: issue template": +'needs: issue template': comment: > :warning: This issue is missing required fields. To avoid this issue being closed, please provide the required information as described in the ISSUE TEMPLATE. -"resolution: no response": +'resolution: no response': comment: > This issue is being closed because the requested information has not been provided. close: true diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index d66e7e8f3b..beb24fb1ad 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -6,10 +6,10 @@ jobs: compressed-size: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: necolas/compressed-size-action@master - with: - build-script: "compile" - exclude: "./packages/react-native-web/dist/cjs/{index.js,**/*.js}" - pattern: "./packages/react-native-web/dist/{index.js,**/*.js}" - repo-token: "${{ secrets.GITHUB_TOKEN }}" + - uses: actions/checkout@v3 + - uses: necolas/compressed-size-action@master + with: + build-script: 'compile' + exclude: './packages/react-native-web/dist/cjs/{index.js,**/*.js}' + pattern: './packages/react-native-web/dist/{index.js,**/*.js}' + repo-token: '${{ secrets.GITHUB_TOKEN }}' diff --git a/.github/workflows/react-integration.yml b/.github/workflows/react-integration.yml index 624522a1f1..e824ce37aa 100644 --- a/.github/workflows/react-integration.yml +++ b/.github/workflows/react-integration.yml @@ -9,12 +9,12 @@ jobs: react-next: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm install - # Update react-native-web to use react@next - - run: npm install --force react@next react-dom@next -w react-native-web - # Run the unit tests - - run: npm run unit + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm install + # Update react-native-web to use react@next + - run: npm install --force react@next react-dom@next -w react-native-web + # Run the unit tests + - run: npm run unit diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 3b001a084c..0556a743e0 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -3,7 +3,7 @@ name: tests on: push: branches: - - "master" + - 'master' pull_request: types: [opened, synchronize, reopened] @@ -11,39 +11,39 @@ jobs: format: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm install - - run: npm run format + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm install + - run: npm run format type-check: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm install - - run: npm run flow + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm install + - run: npm run flow lint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm install - - run: npm run lint + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm install + - run: npm run lint unit-test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm install - - run: npm run unit + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm install + - run: npm run unit diff --git a/README.md b/README.md index 319235e0b4..88569b9804 100644 --- a/README.md +++ b/README.md @@ -4,27 +4,27 @@ This is the development monorepo for "React Native for Web" and related projects ## Structure -* `.github` - * Contains workflows used by GitHub Actions. - * Contains issue templates. -* `configs` - * Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.) -* `packages` - * [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web) - * Contains the individual packages managed in the monorepo. -* `scripts` - * Contains Node.js scripts for miscellaneous tasks. +- `.github` + - Contains workflows used by GitHub Actions. + - Contains issue templates. +- `configs` + - Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.) +- `packages` + - [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web) + - Contains the individual packages managed in the monorepo. +- `scripts` + - Contains Node.js scripts for miscellaneous tasks. ## Tasks -* `build` - * Use `npm run build` to run the build script in every package. - * Use `npm run build -w ` to run the build script for a specific package. -* `dev` - * Use `npm run dev` to run the dev script in every package. - * Use `npm run dev -w ` to run the dev script for a specific package. -* `test` - * Use `npm run test` to run tests for every package. +- `build` + - Use `npm run build` to run the build script in every package. + - Use `npm run build -w ` to run the build script for a specific package. +- `dev` + - Use `npm run dev` to run the dev script in every package. + - Use `npm run dev -w ` to run the dev script for a specific package. +- `test` + - Use `npm run test` to run tests for every package. More details can be found in the contributing guide below. diff --git a/configs/.eslintrc b/configs/.eslintrc index fd03a7a673..157b5ebb55 100644 --- a/configs/.eslintrc +++ b/configs/.eslintrc @@ -17,16 +17,8 @@ "requireConfigFile": false, "sourceType": "module" }, - "extends": [ - "plugin:flowtype/recommended", - "prettier" - ], - "plugins": [ - "flowtype", - "promise", - "react", - "react-hooks" - ], + "extends": ["plugin:flowtype/recommended", "prettier"], + "plugins": ["flowtype", "promise", "react", "react-hooks"], "env": { "browser": true, "es6": true, @@ -41,15 +33,13 @@ "packages/**/vendor/*", "packages/**/.next" ], - "globals": { - - }, + "globals": {}, "rules": { "camelcase": 0, "constructor-super": 2, "default-case": [2, { "commentPattern": "^no default$" }], "eqeqeq": [2, "allow-null"], - "handle-callback-err": [2, "^(err|error)$" ], + "handle-callback-err": [2, "^(err|error)$"], "new-cap": [2, { "newIsCap": true, "capIsNew": false }], "no-alert": 1, "no-array-constructor": 2, @@ -126,7 +116,11 @@ "no-with": 2, "prefer-const": 2, "prefer-rest-params": 2, - "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }], + "quotes": [ + 2, + "single", + { "avoidEscape": true, "allowTemplateLiterals": true } + ], "radix": 2, "use-isnan": 2, "valid-typeof": 2, diff --git a/configs/.prettierignore b/configs/.prettierignore index 488ae02047..d86cf0e9f3 100644 --- a/configs/.prettierignore +++ b/configs/.prettierignore @@ -4,3 +4,4 @@ ../node_modules ../packages/**/vendor/* ../packages/**/.next +../packages/react-native-web-docs/src/includes/**/*.html diff --git a/package.json b/package.json index 0bec059a30..dbded0cca2 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "compile": "npm run build", "dev": "npm run dev --workspaces --if-present", "flow": "flow --flowconfig-name ./configs/.flowconfig", - "format": "prettier --check --ignore-path ./configs/.prettierignore \"**/*.js\"", - "format:fix": "prettier --write --ignore-path ./configs/.prettierignore \"**/*.js\"", + "format": "prettier --check --ignore-path ./configs/.prettierignore --ignore-unknown .", + "format:fix": "prettier --write --ignore-path ./configs/.prettierignore --ignore-unknown .", "lint": "eslint configs packages scripts --config ./configs/.eslintrc", "lint:fix": "npm run lint -- --fix", "prerelease": "npm run test && npm run build", diff --git a/packages/benchmarks/README.md b/packages/benchmarks/README.md index eb51c9f1d3..35a84df21b 100644 --- a/packages/benchmarks/README.md +++ b/packages/benchmarks/README.md @@ -45,11 +45,11 @@ MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM Typical render timings: mean ± standard deviations. -| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | -| :--- | ---: | ---: | ---: | -| `css-modules` | `23.41` `±03.06` | `35.38` `±06.41` | - | -| `react-native-web@0.11.0` | `28.37` `±04.39` | `41.50` `±05.75` | `23.13` `±03.51` | -| `inline-styles` | `66.19` `±06.31` | `104.22` `±10.22` | `09.96` `±02.76` | +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | +| :------------------------ | -------------------: | -------------------: | ------------------: | +| `css-modules` | `23.41` `±03.06` | `35.38` `±06.41` | - | +| `react-native-web@0.11.0` | `28.37` `±04.39` | `41.50` `±05.75` | `23.13` `±03.51` | +| `inline-styles` | `66.19` `±06.31` | `104.22` `±10.22` | `09.96` `±02.76` | ### Moto G4 @@ -57,8 +57,8 @@ Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome Typical render timings: mean ± standard deviations. -| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | -| :--- | ---: | ---: | ---: | -| `css-modules` | `71.33` `±09.68` | `101.36` `±12.36` | - | -| `react-native-web@0.11.0` | `83.65` `±12.40` | `123.59` `±14.40` | `75.41` `±07.74` | -| `inline-styles` | `188.35` `±17.69` | `282.35` `±22.48` | `28.10` `±06.87` | +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | +| :------------------------ | -------------------: | -------------------: | ------------------: | +| `css-modules` | `71.33` `±09.68` | `101.36` `±12.36` | - | +| `react-native-web@0.11.0` | `83.65` `±12.40` | `123.59` `±14.40` | `75.41` `±07.74` | +| `inline-styles` | `188.35` `±17.69` | `282.35` `±22.48` | `28.10` `±06.87` | diff --git a/packages/benchmarks/index.html b/packages/benchmarks/index.html index 4d68cb72e7..978d0c6510 100644 --- a/packages/benchmarks/index.html +++ b/packages/benchmarks/index.html @@ -1,16 +1,24 @@ - - - Performance tests - - - - -
- - + + + Performance tests + + + + +
+ + diff --git a/packages/benchmarks/src/implementations/css-modules/box-styles.css b/packages/benchmarks/src/implementations/css-modules/box-styles.css index 32247319b0..f9202da1db 100644 --- a/packages/benchmarks/src/implementations/css-modules/box-styles.css +++ b/packages/benchmarks/src/implementations/css-modules/box-styles.css @@ -8,27 +8,27 @@ } .color0 { - background-color: #14171A; + background-color: #14171a; } .color1 { - background-color: #AAB8C2; + background-color: #aab8c2; } .color2 { - background-color: #E6ECF0; + background-color: #e6ecf0; } .color3 { - background-color: #FFAD1F; + background-color: #ffad1f; } .color4 { - background-color: #F45D22; + background-color: #f45d22; } .color5 { - background-color: #E0245E; + background-color: #e0245e; } .fixed { diff --git a/packages/dom-event-testing-library/README.md b/packages/dom-event-testing-library/README.md index 45b3db8a65..4627a7edfb 100644 --- a/packages/dom-event-testing-library/README.md +++ b/packages/dom-event-testing-library/README.md @@ -20,10 +20,10 @@ import { testWithPointerType, clearPointers, createEventTarget, - setPointerEvent, + setPointerEvent } from 'dom-event-testing-library'; -describeWithPointerEvent('useTap', hasPointerEvent => { +describeWithPointerEvent('useTap', (hasPointerEvent) => { beforeEach(() => { // basic PointerEvent mock setPointerEvent(hasPointerEvent); @@ -35,14 +35,14 @@ describeWithPointerEvent('useTap', hasPointerEvent => { }); // test all the pointer types supported by the environment - testWithPointerType('pointer down', pointerType => { + testWithPointerType('pointer down', (pointerType) => { const ref = createRef(null); const onTapStart = jest.fn(); // component to test function Component() { useTapEvents(ref, { onTapStart }); - return
+ return
; } // render component @@ -87,9 +87,9 @@ Tests that dispatch multiple pointer events will dispatch multi-touch native eve ```js // first pointer is active -target.pointerdown({pointerId: 1, pointerType}); +target.pointerdown({ pointerId: 1, pointerType }); // second pointer is active -target.pointerdown({pointerId: 2, pointerType}); +target.pointerdown({ pointerId: 2, pointerType }); ``` ## API @@ -98,23 +98,23 @@ target.pointerdown({pointerId: 2, pointerType}); To create a new event target pass the DOM node to `createEventTarget(node)`. This target can then be used to dispatch event sequences and customize the event payload. The following are currently supported: -* `blur` -* `click` -* `contextmenu` -* `focus` (includes the complete sequence of focus-related events) -* `keydown` -* `keyup` -* `pointercancel` -* `pointerdown` -* `pointerhover` (moves when pointer is not down) -* `pointermove` (moves when pointer is down) -* `pointerover` -* `pointerout` -* `scroll` -* `select` -* `selectionchange` -* `tap` (equivalent to `pointerdown` followed by `pointerup`) -* `virtualclick` +- `blur` +- `click` +- `contextmenu` +- `focus` (includes the complete sequence of focus-related events) +- `keydown` +- `keyup` +- `pointercancel` +- `pointerdown` +- `pointerhover` (moves when pointer is not down) +- `pointermove` (moves when pointer is down) +- `pointerover` +- `pointerout` +- `scroll` +- `select` +- `selectionchange` +- `tap` (equivalent to `pointerdown` followed by `pointerup`) +- `virtualclick` The target also has `node` property equal to the node that was used to create the target, and a `setBoundClientRect({x,y,width,height})` method that can be used to mock the return value of `getBoundingClientRect`. @@ -125,7 +125,7 @@ The target also has `node` property equal to the node that was used to create th This is just like `describe` but it will run the entire test suite twice, once in an environment with `PointerEvent` mocked and once without. ```js -describeWithPointerEvent('useTap', hasPointerEvent => { +describeWithPointerEvent('useTap', (hasPointerEvent) => { // test suite }); ``` @@ -135,7 +135,7 @@ describeWithPointerEvent('useTap', hasPointerEvent => { The is just like `test` but it will run the test for every pointer type supported by the environment. When `PointerEvent` is mocked, the pointer types will be `mouse`, `touch`, and `pen`; otherwise the pointer types will be `mouse` and `touch`. ```js -testWithPointerType('pointer down', pointerType => { +testWithPointerType('pointer down', (pointerType) => { // test unit }); ``` diff --git a/packages/react-native-web-docs/src/includes/assets/inline.css b/packages/react-native-web-docs/src/includes/assets/inline.css index 2443783f19..aac824175d 100644 --- a/packages/react-native-web-docs/src/includes/assets/inline.css +++ b/packages/react-native-web-docs/src/includes/assets/inline.css @@ -21,23 +21,24 @@ --docs-spacing-72: 18rem; --docs-spacing-80: 20rem; - --docs-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + --docs-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Helvetica, Arial, sans-serif; --docs-font-size: 14px; --docs-heading-size: 2em; --docs-line-height: 1.5; - --docs-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --docs-ring-inset: var(--tw-empty, /*!*/ /*!*/); --docs-ring-offset-width: 0px; } /* Widescreen */ - @media (min-width: 1088px) { +@media (min-width: 1088px) { :root { --docs-font-size: 16px; --docs-heading-size: 2.25em; } - } +} /* Light theme */ @@ -62,7 +63,8 @@ --docs-ring-offset-shadow: 0 0 #0000; --docs-ring-shadow: 0 0 #0000; - --docs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --docs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); } } @@ -85,7 +87,8 @@ --docs-ring-offset-shadow: 0 0 #0000; --docs-ring-shadow: 0 0 #0000; - --docs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --docs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); } } @@ -94,20 +97,67 @@ * -------------------------------------------------------- */ -html { font: var(--docs-font-size)/var(--docs-line-height) var(--docs-font-family); } -body { background-color: var(--docs-bg-color, transparent); color: var(--docs-text-color, #333); margin: 0; } -button, input { overflow: visible; } -button, select { text-transform: none; } -code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } -hr { box-sizing: content-box; height: 0; overflow: visible; } -img { border-style: none; } -img, video, svg, iframe { display: block; } -img, video { max-width: 100%; height: auto; } -svg:not(:root){ overflow: hidden; } -table { border-collapse: collapse; } -:not(:focus-visible) { outline-width: 0; } -a { color: var(--docs-link-color); text-decoration: underline; } -h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } +html { + font: var(--docs-font-size) / var(--docs-line-height) var(--docs-font-family); +} +body { + background-color: var(--docs-bg-color, transparent); + color: var(--docs-text-color, #333); + margin: 0; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +code, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +img { + border-style: none; +} +img, +video, +svg, +iframe { + display: block; +} +img, +video { + max-width: 100%; + height: auto; +} +svg:not(:root) { + overflow: hidden; +} +table { + border-collapse: collapse; +} +:not(:focus-visible) { + outline-width: 0; +} +a { + color: var(--docs-link-color); + text-decoration: underline; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--docs-heading-color); +} /** * Core components @@ -168,7 +218,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } .before-middot::before { display: inline-block; - content: ""; + content: ''; width: 3px; height: 3px; background-color: currentColor; @@ -344,7 +394,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } } .markdown ul > li::before { - content: ""; + content: ''; position: absolute; background-color: currentColor; border-radius: 50%; @@ -371,7 +421,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } font-style: italic; border-left-width: 0.25rem; border-left-color: #e5e7eb; - quotes: "\201C""\201D""\2018""\2019"; + quotes: '\201C''\201D''\2018''\2019'; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; @@ -382,124 +432,338 @@ h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } * -------------------------------------------------------- */ -.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - -.border { border-width: 1px; border-style: solid; } -.border-none { border: none; } -.border-top { border-top-width: 1px; border-top-style: solid; } -.border-right { border-right-width: 1px; border-right-style: solid; } -.border-left { border-left-width: 1px; border-left-style: solid; } -.border-bottom { border-bottom-width: 1px; border-bottom-style: solid; } -.border-left-3 { border-width: 3px; } - -.block { display: block; } -.hidden { display: none; } -.inline { display: inline; } -.inline-block { display: inline-block; } -.inline-flex { display: inline-flex; } -.flex { display: flex; } - -.rounded { border-radius: var(--docs-spacing-1, 0.25rem); } -.rounded-full { border-radius: 9999px; } - -.cursor-pointer { cursor: pointer; } - -.flex-row { flex-direction: row; } -.flex-1 { flex: 1; } -.flex-shrink { flex-shrink: 1; } -.flex-wrap { flex-wrap: wrap; } -.flex-nowrap { flex-wrap: nowrap; } -.items-center { align-items: center; } -.justify-center { justify-content: center; } - -.font-bold { font-weight: bold; } -.font-normal { font-weight: normal; } -.font-mono { font-family: monospace, monospace; font-size: 1em; } -.font-semibold { font-weight: 600; } - -.h-12 { height: var(--docs-spacing-12); } -.h-full { height: 100%; } -.h-screen { height: 100vh; } - -.list-none { list-style: none; } - -.m-0 { margin: 0; } -.mx-auto { margin-left: auto; margin-right: auto; } -.my-2 { margin-top: var(--docs-spacing-2); margin-bottom: var(--docs-spacing-2); } -.my-8 { margin-top: var(--docs-spacing-8); margin-bottom: var(--docs-spacing-8); } -.ml-2 { margin-left: var(--docs-spacing-2); } -.mt-2 { margin-top: var(--docs-spacing-2); } -.mt-4 { margin-top: var(--docs-spacing-4); } -.mt-6 { margin-top: var(--docs-spacing-6); } -.mt-12 { margin-top: var(--docs-spacing-12); } -.mr-2 { margin-right: var(--docs-spacing-2); } -.mr-4 { margin-right: var(--docs-spacing-4); } -.mb-2 { margin-bottom: var(--docs-spacing-2); } -.mb-4 { margin-bottom: var(--docs-spacing-4); } -.mb-8 { margin-bottom: var(--docs-spacing-8); } - -.opacity-0 { opacity: 0; } -.opacity-50 { opacity: 0.5; } -.overflow-hidden { overflow: hidden; } -.overflow-x-hidden { overflow-x: hidden; } -.overflow-y-auto { overflow-y: auto; } - -.p-6 { padding: var(--docs-spacing-6); } -.px-1 { padding-left: var(--docs-spacing-1); padding-right: var(--docs-spacing-1); } -.px-3 { padding-left: var(--docs-spacing-3); padding-right: var(--docs-spacing-3); } -.px-4 { padding-left: var(--docs-spacing-4); padding-right: var(--docs-spacing-4); } -.px-6 { padding-left: var(--docs-spacing-6); padding-right: var(--docs-spacing-6); } -.py-1 { padding-top: var(--docs-spacing-1); padding-bottom: var(--docs-spacing-1); } -.py-2 { padding-top: var(--docs-spacing-2); padding-bottom: var(--docs-spacing-2); } -.py-3 { padding-top: var(--docs-spacing-3); padding-bottom: var(--docs-spacing-3); } -.py-4 { padding-top: var(--docs-spacing-4); padding-bottom: var(--docs-spacing-4); } -.pl-5 { padding-left: var(--docs-spacing-5); } -.pt-1 { padding-top: var(--docs-spacing-1); } -.pt-8 { padding-top: var(--docs-spacing-8); } -.pt-12 { padding-top: var(--docs-spacing-12); } -.pb-1 { padding-bottom: var(--docs-spacing-1); } - -.absolute { position: absolute; } -.relative { position: relative; } -.sticky { position: sticky; } -.fixed { position: fixed; } - -.overflow-ellipsis { overflow: hidden; text-overflow: ellipsis; } - -.text-uppercase { text-transform: uppercase; } -.text-sm { font-size: 0.875rem; line-height: 1.25; } -.text-xl { font-size: 1.25rem; line-height: 1.25; } -.text-2xl { font-size: 2rem; line-height: 1.25; } -.text-3xl { font-size: 3rem; line-height: 1.25; } - -.w-auto { width: auto; } -.w-40 { width: var(--docs-spacing-40); } -.w-72 { width: var(--docs-spacing-72); } -.w-full { width: 100%; } - -.whitespace-nowrap { white-space: nowrap; } - -.z-10 { z-index: 10; } -.z-20 { z-index: 20; } - -.fill-current { fill: currentColor; } -.inset-y-0 { top: 0px; bottom: 0px; } -.no-underline { text-decoration: none; } -.ring-opacity-50 { --docs-ring-opacity: 0.5; } +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.border { + border-width: 1px; + border-style: solid; +} +.border-none { + border: none; +} +.border-top { + border-top-width: 1px; + border-top-style: solid; +} +.border-right { + border-right-width: 1px; + border-right-style: solid; +} +.border-left { + border-left-width: 1px; + border-left-style: solid; +} +.border-bottom { + border-bottom-width: 1px; + border-bottom-style: solid; +} +.border-left-3 { + border-width: 3px; +} + +.block { + display: block; +} +.hidden { + display: none; +} +.inline { + display: inline; +} +.inline-block { + display: inline-block; +} +.inline-flex { + display: inline-flex; +} +.flex { + display: flex; +} + +.rounded { + border-radius: var(--docs-spacing-1, 0.25rem); +} +.rounded-full { + border-radius: 9999px; +} + +.cursor-pointer { + cursor: pointer; +} + +.flex-row { + flex-direction: row; +} +.flex-1 { + flex: 1; +} +.flex-shrink { + flex-shrink: 1; +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-nowrap { + flex-wrap: nowrap; +} +.items-center { + align-items: center; +} +.justify-center { + justify-content: center; +} + +.font-bold { + font-weight: bold; +} +.font-normal { + font-weight: normal; +} +.font-mono { + font-family: monospace, monospace; + font-size: 1em; +} +.font-semibold { + font-weight: 600; +} + +.h-12 { + height: var(--docs-spacing-12); +} +.h-full { + height: 100%; +} +.h-screen { + height: 100vh; +} + +.list-none { + list-style: none; +} + +.m-0 { + margin: 0; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-2 { + margin-top: var(--docs-spacing-2); + margin-bottom: var(--docs-spacing-2); +} +.my-8 { + margin-top: var(--docs-spacing-8); + margin-bottom: var(--docs-spacing-8); +} +.ml-2 { + margin-left: var(--docs-spacing-2); +} +.mt-2 { + margin-top: var(--docs-spacing-2); +} +.mt-4 { + margin-top: var(--docs-spacing-4); +} +.mt-6 { + margin-top: var(--docs-spacing-6); +} +.mt-12 { + margin-top: var(--docs-spacing-12); +} +.mr-2 { + margin-right: var(--docs-spacing-2); +} +.mr-4 { + margin-right: var(--docs-spacing-4); +} +.mb-2 { + margin-bottom: var(--docs-spacing-2); +} +.mb-4 { + margin-bottom: var(--docs-spacing-4); +} +.mb-8 { + margin-bottom: var(--docs-spacing-8); +} + +.opacity-0 { + opacity: 0; +} +.opacity-50 { + opacity: 0.5; +} +.overflow-hidden { + overflow: hidden; +} +.overflow-x-hidden { + overflow-x: hidden; +} +.overflow-y-auto { + overflow-y: auto; +} + +.p-6 { + padding: var(--docs-spacing-6); +} +.px-1 { + padding-left: var(--docs-spacing-1); + padding-right: var(--docs-spacing-1); +} +.px-3 { + padding-left: var(--docs-spacing-3); + padding-right: var(--docs-spacing-3); +} +.px-4 { + padding-left: var(--docs-spacing-4); + padding-right: var(--docs-spacing-4); +} +.px-6 { + padding-left: var(--docs-spacing-6); + padding-right: var(--docs-spacing-6); +} +.py-1 { + padding-top: var(--docs-spacing-1); + padding-bottom: var(--docs-spacing-1); +} +.py-2 { + padding-top: var(--docs-spacing-2); + padding-bottom: var(--docs-spacing-2); +} +.py-3 { + padding-top: var(--docs-spacing-3); + padding-bottom: var(--docs-spacing-3); +} +.py-4 { + padding-top: var(--docs-spacing-4); + padding-bottom: var(--docs-spacing-4); +} +.pl-5 { + padding-left: var(--docs-spacing-5); +} +.pt-1 { + padding-top: var(--docs-spacing-1); +} +.pt-8 { + padding-top: var(--docs-spacing-8); +} +.pt-12 { + padding-top: var(--docs-spacing-12); +} +.pb-1 { + padding-bottom: var(--docs-spacing-1); +} + +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.sticky { + position: sticky; +} +.fixed { + position: fixed; +} + +.overflow-ellipsis { + overflow: hidden; + text-overflow: ellipsis; +} + +.text-uppercase { + text-transform: uppercase; +} +.text-sm { + font-size: 0.875rem; + line-height: 1.25; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.25; +} +.text-2xl { + font-size: 2rem; + line-height: 1.25; +} +.text-3xl { + font-size: 3rem; + line-height: 1.25; +} + +.w-auto { + width: auto; +} +.w-40 { + width: var(--docs-spacing-40); +} +.w-72 { + width: var(--docs-spacing-72); +} +.w-full { + width: 100%; +} + +.whitespace-nowrap { + white-space: nowrap; +} + +.z-10 { + z-index: 10; +} +.z-20 { + z-index: 20; +} + +.fill-current { + fill: currentColor; +} +.inset-y-0 { + top: 0px; + bottom: 0px; +} +.no-underline { + text-decoration: none; +} +.ring-opacity-50 { + --docs-ring-opacity: 0.5; +} /* Colors */ -.bg-theme { background-color: var(--docs-bg-color); } -.border-color-faint { border-color: var(--docs-border-color-faint); } -.border-theme-faint { border-color: var(--docs-theme-color-faint); } -.text-color { color: var(--docs-text-color); } -.text-color-faint { color: var(--docs-text-color-faint); } -.text-white { --docs-text-opacity: 1; color: rgba(255, 255, 255, var(--docs-text-opacity)); } +.bg-theme { + background-color: var(--docs-bg-color); +} +.border-color-faint { + border-color: var(--docs-border-color-faint); +} +.border-theme-faint { + border-color: var(--docs-theme-color-faint); +} +.text-color { + color: var(--docs-text-color); +} +.text-color-faint { + color: var(--docs-text-color-faint); +} +.text-white { + --docs-text-opacity: 1; + color: rgba(255, 255, 255, var(--docs-text-opacity)); +} /* Interactions */ -.hover\:opacity-100:hover { opacity: 1; } -.hover\:text-color-inherit:hover { color: inherit; } +.hover\:opacity-100:hover { + opacity: 1; +} +.hover\:text-color-inherit:hover { + color: inherit; +} /** * Widescreen breakpoint @@ -507,23 +771,53 @@ h1, h2, h3, h4, h5, h6 { color: var(--docs-heading-color); } */ @media (min-width: 1088px) { - .container { max-width: 1400px; } - .navigation { right: auto; } + .container { + max-width: 1400px; + } + .navigation { + right: auto; + } - .wide\:block { display: block; } - .wide\:flex { display: flex; } - .wide\:hidden { display: none; } + .wide\:block { + display: block; + } + .wide\:flex { + display: flex; + } + .wide\:hidden { + display: none; + } - .wide\:flex-row { flex-direction: row; } + .wide\:flex-row { + flex-direction: row; + } - .wide\:sticky { position: sticky; } - .wide\:opacity-0 { opacity: 0; } - .wide\:opacity-1 { opacity: 1; } + .wide\:sticky { + position: sticky; + } + .wide\:opacity-0 { + opacity: 0; + } + .wide\:opacity-1 { + opacity: 1; + } - .wide\:left-0 { left: 0; } - .wide\:right-0 { right: 0; } - .wide\:top-16 { top: var(--docs-spacing-16); } + .wide\:left-0 { + left: 0; + } + .wide\:right-0 { + right: 0; + } + .wide\:top-16 { + top: var(--docs-spacing-16); + } - .wide\:px-20 {padding-left: var(--docs-spacing-20); padding-right: var(--docs-spacing-20);} - .wide\:px-40 {padding-left: var(--docs-spacing-40); padding-right: var(--docs-spacing-40);} + .wide\:px-20 { + padding-left: var(--docs-spacing-20); + padding-right: var(--docs-spacing-20); + } + .wide\:px-40 { + padding-left: var(--docs-spacing-40); + padding-right: var(--docs-spacing-40); + } } diff --git a/packages/react-native-web-docs/src/pages/docs/apis/_.md b/packages/react-native-web-docs/src/pages/docs/apis/_.md index bb1900fc30..e9f07bc94b 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/_.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/_.md @@ -5,5 +5,5 @@ permalink: false eleventyNavigation: key: APIs title: APIs - order: 30 + order: 30 --- diff --git a/packages/react-native-web-docs/src/pages/docs/apis/animated.md b/packages/react-native-web-docs/src/pages/docs/apis/animated.md index a417da0cb4..f7eb3b130e 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/animated.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/animated.md @@ -13,7 +13,7 @@ Animated focuses on declarative relationships between inputs and outputs, config This API is the same JavaScript implementation as found in React Native. Please refer to the React Native documentation below: -* [Animated](https://reactnative.dev/docs/animated) +- [Animated](https://reactnative.dev/docs/animated) :::callout **Warning!** The React Native animation API is not optimized for the web. You may prefer to use external modules that are designed for multi-platform animations and provide better performance, e.g., [React Spring](https://www.react-spring.io/). diff --git a/packages/react-native-web-docs/src/pages/docs/apis/app-state.md b/packages/react-native-web-docs/src/pages/docs/apis/app-state.md index e9b832749e..9f5289df14 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/app-state.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/app-state.md @@ -15,7 +15,6 @@ AppState can tell you if the app is in the foreground or background, and notify States: active (the app is running in the foreground), background (the app is running in the background, i.e., the user has not focused the app's tab). - ```js import { AppState } from 'react-native'; ``` diff --git a/packages/react-native-web-docs/src/pages/docs/apis/linking.md b/packages/react-native-web-docs/src/pages/docs/apis/linking.md index de82754d53..5437074230 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/linking.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/linking.md @@ -32,7 +32,7 @@ Returns a `Promise` that resolves to the string of the URL that initially loaded {% endcall %} {% call macro.prop('openURL', '(url, target) => Promise<>') %} -Try to open the given url in a secure fashion. The provided target (including `undefined`) will be passed as the window target, or "_blank" if no target included. The method returns a Promise object. If the url opens, the promise is resolved. If not, the promise is rejected. +Try to open the given url in a secure fashion. The provided target (including `undefined`) will be passed as the window target, or "\_blank" if no target included. The method returns a Promise object. If the url opens, the promise is resolved. If not, the promise is rejected. {% endcall %} --- diff --git a/packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md b/packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md index fcab7d9ea0..bf35fde193 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md @@ -19,7 +19,7 @@ PanResponder reconciles several pointers into a single gesture. It makes single- Please refer to the React Native documentation below: -* [PanResponder](https://reactnative.dev/docs/panresponder) +- [PanResponder](https://reactnative.dev/docs/panresponder) --- diff --git a/packages/react-native-web-docs/src/pages/docs/apis/pixel-ratio.md b/packages/react-native-web-docs/src/pages/docs/apis/pixel-ratio.md index d4f7a7264d..a2c676c8e4 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/pixel-ratio.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/pixel-ratio.md @@ -36,5 +36,5 @@ Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer {% endcall %} {% call macro.prop('roundToNearestPixel', '(number) => number') %} -Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to exactly (8.33 * 3) = 25 pixels. +Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to exactly (8.33 \* 3) = 25 pixels. {% endcall %} diff --git a/packages/react-native-web-docs/src/pages/docs/apis/vibration.md b/packages/react-native-web-docs/src/pages/docs/apis/vibration.md index 0208820ea0..928c2344e7 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/vibration.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/vibration.md @@ -10,7 +10,7 @@ eleventyNavigation: {% import "fragments/macros.html" as macro with context %} :::lead -Vibration is described as a pattern of on-off pulses, which may be of varying lengths. +Vibration is described as a pattern of on-off pulses, which may be of varying lengths. ::: The vibration pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: `Vibration.vibrate()`. diff --git a/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md b/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md index eb8058592f..603756a1dd 100644 --- a/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md +++ b/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md @@ -70,19 +70,19 @@ const styled = (Component, styler) => { render() { const theme = this.context.getTheme && this.context.getTheme(); const localProps = { ...this.props, theme }; - const nextProps = { ...this.props } + const nextProps = { ...this.props }; const style = typeof styler === 'function' ? styler(localProps) : styler; - nextProps.style = [ style, this.props.style ]; + nextProps.style = [style, this.props.style]; - return ( - isDOMComponent - ? unstable_createElement(Component, nextProps) - : + return isDOMComponent ? ( + unstable_createElement(Component, nextProps) + ) : ( + ); } } return Styled; -} +}; const styles = StyleSheet.create({ container: { diff --git a/packages/react-native-web-docs/src/pages/docs/components/_.md b/packages/react-native-web-docs/src/pages/docs/components/_.md index 65743a93ef..46a1836b71 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/_.md +++ b/packages/react-native-web-docs/src/pages/docs/components/_.md @@ -5,5 +5,5 @@ permalink: false eleventyNavigation: key: Components title: Components - order: 20 + order: 20 --- diff --git a/packages/react-native-web-docs/src/pages/docs/components/lists.md b/packages/react-native-web-docs/src/pages/docs/components/lists.md index c0724f9623..267f3d950f 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/lists.md +++ b/packages/react-native-web-docs/src/pages/docs/components/lists.md @@ -15,9 +15,9 @@ Basic support for FlatList, SectionList, and VirtualizedList. These components are the same JavaScript implementations as those found in React Native. Please refer to the React Native documentation below: -* [FlatList](https://reactnative.dev/docs/flatlist) -* [SectionList](https://reactnative.dev/docs/sectionlist) -* [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) +- [FlatList](https://reactnative.dev/docs/flatlist) +- [SectionList](https://reactnative.dev/docs/sectionlist) +- [VirtualizedList](https://reactnative.dev/docs/virtualizedlist) :::callout **Warning!** The React Native list components are not optimized for the web. You may prefer to use external modules that are designed for multi-platform lists and provide better performance, e.g., [RecyclerListView](https://github.com/Flipkart/recyclerlistview). diff --git a/packages/react-native-web-docs/src/pages/docs/components/pressable.md b/packages/react-native-web-docs/src/pages/docs/components/pressable.md index 757c45f8d4..d64b95061c 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/pressable.md +++ b/packages/react-native-web-docs/src/pages/docs/components/pressable.md @@ -64,7 +64,7 @@ Called when the pointer is held down for as long as the value of `delayLongPress {% endcall %} {% call macro.prop('onPress', '?(e: MouseEvent) => void') %} -Called when the pointer is released without first being cancelled (e.g. by a scroll that steals the responder lock). Equivalent to the `click` DOM event. +Called when the pointer is released without first being cancelled (e.g. by a scroll that steals the responder lock). Equivalent to the `click` DOM event. {% endcall %} {% call macro.prop('onPressIn', '?(e: ResponderEvent) => void') %} diff --git a/packages/react-native-web-docs/src/pages/docs/components/text.md b/packages/react-native-web-docs/src/pages/docs/components/text.md index 4a594975bd..38c4485248 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/text.md +++ b/packages/react-native-web-docs/src/pages/docs/components/text.md @@ -5,7 +5,7 @@ permalink: /docs/text/index.html eleventyNavigation: key: Text parent: Components - label: "Change" + label: 'Change' --- {% import "fragments/macros.html" as macro with context %} @@ -61,7 +61,7 @@ Equivalent to [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web {% endcall %} {% call macro.prop('dir', '?("auto" | "ltr" | "rtl") = "auto"') %} -Equivalent to [HTMLElement.dir](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir). The default value of `"auto"` is not set on *nested* text elements. +Equivalent to [HTMLElement.dir](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir). The default value of `"auto"` is not set on _nested_ text elements. {% endcall %} {% call macro.prop('href', '?string') %} diff --git a/packages/react-native-web-docs/src/pages/docs/components/view.md b/packages/react-native-web-docs/src/pages/docs/components/view.md index 01ed1fbbfd..ffbb56bf1b 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/view.md +++ b/packages/react-native-web-docs/src/pages/docs/components/view.md @@ -5,7 +5,7 @@ permalink: /docs/view/index.html eleventyNavigation: key: View parent: Components - label: "Change" + label: 'Change' --- {% import "fragments/macros.html" as macro with context %} @@ -55,7 +55,7 @@ The [ResponderEvent props]({{ '/docs/interactions' | url }}). {% endcall %} {% call macro.prop('children', 'any') %} -The children of a `View` element can be other elements and must *not* include strings (or components that render down to strings). +The children of a `View` element can be other elements and must _not_ include strings (or components that render down to strings). {% endcall %} {% call macro.prop('dataSet', '?Object') %} diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md b/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md index 742a6d89d5..94e7a66c43 100644 --- a/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md +++ b/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md @@ -5,7 +5,7 @@ permalink: /docs/accessibility/index.html eleventyNavigation: key: Accessibility parent: Concepts - label: "Change" + label: 'Change' --- {% import "fragments/macros.html" as macro with context %} @@ -222,12 +222,9 @@ The `Text` and `View` components can be rendered as links. If the `href` prop is The `hrefAttrs` prop sets link-related attributes. ```jsx -const hrefAttrs = { download: true, rel: "nofollow", target: "blank" }; +const hrefAttrs = { download: true, rel: 'nofollow', target: 'blank' }; - +; // ``` @@ -252,12 +249,7 @@ The `tabIndex` prop determines whether a component is user-focusable and appears {{ site.name }} components express semantics exclusively via the `aria-*` props. ```jsx - + /*
void') %} A pointer down event occured on the screen. The responder is notified of all start events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder. @@ -153,7 +153,7 @@ A pointer up event occured on the screen. The responder is notified of all end e {% endcall %} {% call macro.prop('onResponderRelease', '?(event: ResponderEvent) => void') %} -As soon as there are no more pointers that *started* inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over. +As soon as there are no more pointers that _started_ inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over. {% endcall %} ### ResponderEvent diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md index 547024d034..f42ab3e153 100644 --- a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md +++ b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md @@ -15,7 +15,6 @@ A guide to producing localized layout for different locales. {{ site.name }} provides simple mechanisms to automatically flip layouts to match the writing direction of the app or a specific component tree. - ## Localization styles The non-standard [direction-independent style properties and values]({{ '/docs/styling/#non-standard-properties' | url }}) (e.g., `marginStart`) should be used as much as possible. {{ site.name }} will automatically flip the direction of these properties within subtrees based on the writing direction of the ancestor tree. @@ -23,9 +22,7 @@ The non-standard [direction-independent style properties and values]({{ '/docs/s ```jsx // "start" is "left" for LTR and "right" for RTL const style = { paddingInlineStart: 10, marginInlineStart: 10 }; -return ( - -); +return ; ``` ## Localization props diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md b/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md index d06500a016..effbb01177 100644 --- a/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md +++ b/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md @@ -13,7 +13,7 @@ Client and server rendering with {{ site.name }}. React Native for Web can be used for multi-platform and web-only applications. It can incrementally adopted by existing React Web apps and integrated with existing React Native apps. Preact is also supported. -{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to *all* tags in a document may interfere with the default rendering of some {{ site.name }} components. +{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to _all_ tags in a document may interfere with the default rendering of some {{ site.name }} components. --- @@ -42,7 +42,7 @@ Or render individual components: import { render } from 'react-native'; import Header from './src/Header'; -render(
, document.getElementById('header')) +render(
, document.getElementById('header')); ``` You might need to adjust the styles of the HTML document's root elements for your app to fill the viewport. @@ -51,6 +51,8 @@ You might need to adjust the styles of the HTML document's root elements for you
+ + ``` :::callout @@ -72,7 +74,9 @@ import { AppRegistry } from 'react-native-web'; AppRegistry.registerComponent('App', () => App); // prerender the app -const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps }); +const { element, getStyleElement } = AppRegistry.getApplication('App', { + initialProps +}); // first the element const html = ReactDOMServer.renderToString(element); // then the styles (optionally include a nonce if your CSP policy requires it) @@ -90,5 +94,5 @@ ${css} ${html}
-` +`; ``` diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md index fef21c6d8c..5917781f6b 100644 --- a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md +++ b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md @@ -5,7 +5,7 @@ permalink: /docs/styling/index.html eleventyNavigation: key: Styling parent: Concepts - label: "Change" + label: 'Change' --- {% import "fragments/macros.html" as macro with context %} @@ -31,7 +31,7 @@ const Component = () => ; All the React Native components accept a `style` property. The value can be a registered object, a plain object, or an array of objects. The array syntax will merge styles from left-to-right as normal JavaScript objects, and can be used to conditionally apply styles: ```jsx - + ``` To let other components customize the style of a component's children you can expose a prop so styles can be explicitly passed into the component. @@ -40,20 +40,15 @@ To let other components customize the style of a component's children you can ex function List(props) { return ( - {elements.map((element) => - - )} + {elements.map((element) => ( + + ))} ); } function App() { - return ( - - ); + return ; } ``` @@ -63,11 +58,11 @@ You have greater control over how styles are composed when compared to using cla ## Styles API -{{ site.name }} supports all *long-form* CSS properties. There is no direct support for `@`-rules, selectors, pseudo-selectors, and pseudo-elements, equivalents of which are demonstrated in the [styling patterns](#styling-patterns) section below. +{{ site.name }} supports all _long-form_ CSS properties. There is no direct support for `@`-rules, selectors, pseudo-selectors, and pseudo-elements, equivalents of which are demonstrated in the [styling patterns](#styling-patterns) section below. ### Short-form properties -The supported short-form CSS properties accept only a *single* value. +The supported short-form CSS properties accept only a _single_ value. {% call macro.prop('borderColor', '?string') %} Accepts only a single value that is applied to all sides. @@ -194,7 +189,7 @@ const red = { color: 'red' }
``` -This approach means that components are designed with isolation in mind. You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will *look and behave* the same way. Text properties that could inherit from outside of the props would break this isolation. +This approach means that components are designed with isolation in mind. You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will _look and behave_ the same way. Text properties that could inherit from outside of the props would break this isolation. --- @@ -222,24 +217,26 @@ Style resolution is deterministic and slightly different from CSS. In the follow ```html
``` -But in {{ site.name }} the most *precise* style property takes precedence, resulting in margins of `10,0,20,0`. +But in {{ site.name }} the most _precise_ style property takes precedence, resulting in margins of `10,0,20,0`. ```jsx -const style = [ - { marginTop: 10 }, - { marginBottom: 20 }, - { margin: 0 } -]; +const style = [{ marginTop: 10 }, { marginBottom: 20 }, { margin: 0 }]; -const Box = () => +const Box = () => ; ``` {{ site.name }} transforms styles objects into CSS and inline styles. Any styles defined using `StyleSheet.create` will ultimately be rendered using CSS class names. Each rule is broken down into declarations, properties are expanded to their long-form, and the resulting key-value pairs are mapped to unique "atomic CSS" class names. @@ -247,7 +244,7 @@ const Box = () => Input: ```jsx -const Box = () => +const Box = () => ; const styles = StyleSheet.create({ box: { @@ -260,16 +257,24 @@ Output: ```html
``` -This ensures that CSS order doesn't impact rendering and CSS rules are efficiently deduplicated. Rather than the total CSS growing in proportion to the number of *rules*, it grows in proportion to the number of *unique declarations*. As a result, the DOM style sheet is only written to when new unique declarations are defined and it is usually small enough to be pre-rendered and inlined. +This ensures that CSS order doesn't impact rendering and CSS rules are efficiently deduplicated. Rather than the total CSS growing in proportion to the number of _rules_, it grows in proportion to the number of _unique declarations_. As a result, the DOM style sheet is only written to when new unique declarations are defined and it is usually small enough to be pre-rendered and inlined. Class names are deterministic, which means that the resulting CSS and HTML is consistent across builds – important for large apps using code-splitting and deploying incremental updates. diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/_.md b/packages/react-native-web-docs/src/pages/docs/getting-started/_.md index c167b6cba3..f4111338d6 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/_.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/_.md @@ -5,5 +5,5 @@ permalink: false eleventyNavigation: key: Start title: Getting started - order: 0 + order: 0 --- diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/browser-compatibility.md b/packages/react-native-web-docs/src/pages/docs/getting-started/browser-compatibility.md index 301ec8b38a..c599514278 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/browser-compatibility.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/browser-compatibility.md @@ -16,11 +16,11 @@ Understanding {{ site.name }} browser compatibility. The browsers with known support include: -* Chrome 60+ -* Safari 10.1+ / iOS Safari 10.1+ -* Edge 12+ -* Firefox ESR+ -* Opera +- Chrome 60+ +- Safari 10.1+ / iOS Safari 10.1+ +- Edge 12+ +- Firefox ESR+ +- Opera If specific exports have a different browser support expectation, it will be documented with that export. @@ -39,7 +39,7 @@ Most CSS properties and values are supported. Vendor prefixes are automatically ```js const style = { userSelect: 'none' -} +}; ``` The resulting CSS is: diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/help.md b/packages/react-native-web-docs/src/pages/docs/getting-started/help.md index 5297c9c913..da238ed936 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/help.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/help.md @@ -2,7 +2,7 @@ title: Help date: Last Modified permalink: /docs/help/index.html -description: +description: eleventyNavigation: key: Help parent: Start diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/introduction.md b/packages/react-native-web-docs/src/pages/docs/getting-started/introduction.md index 67557da07a..9eff115d2a 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/introduction.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/introduction.md @@ -26,13 +26,13 @@ React Native for Web is a compatibility layer between React DOM and React Native ## Components -{{ site.name }} provides all the core components you'd expect from React Native. You will mostly work with `View`, `Image`, `Text`, `TextInput`, and `ScrollView`. The core components include props for working with interactions, including the advanced gesture [responder system]({{ '/docs/interactions' | url }}). Each component's documentation contains live and editable examples to try out. +{{ site.name }} provides all the core components you'd expect from React Native. You will mostly work with `View`, `Image`, `Text`, `TextInput`, and `ScrollView`. The core components include props for working with interactions, including the advanced gesture [responder system]({{ '/docs/interactions' | url }}). Each component's documentation contains live and editable examples to try out. React Native for Web exports many different modules to support a variety of use cases. Your application can use as many or as few of these modules as needed. The babel plugin will help you to only bundle the modules that you are using. ## Styles -{{ site.name }} components use JavaScript to author styles which are converted to native CSS. The design of this styling system avoids *all* the [problems with CSS at scale](https://speakerdeck.com/vjeux/react-css-in-js) and produces highly optimized CSS without the need to learn a domain-specific styling language and without the need for specialized tooling that parses markup to remove unused styles. +{{ site.name }} components use JavaScript to author styles which are converted to native CSS. The design of this styling system avoids _all_ the [problems with CSS at scale](https://speakerdeck.com/vjeux/react-css-in-js) and produces highly optimized CSS without the need to learn a domain-specific styling language and without the need for specialized tooling that parses markup to remove unused styles. ## Reliable and tested diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/multi-platform.md b/packages/react-native-web-docs/src/pages/docs/getting-started/multi-platform.md index fa132d4f58..a19ab5a7ba 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/multi-platform.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/multi-platform.md @@ -14,7 +14,7 @@ How to integrate React Native for Web into an existing React Native codebase. 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 are interested in making a multi-platform app it is *strongly recommended* that you use [Expo](https://expo.dev) (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.dev/workflow/web/) and takes care of all the configuration work required. +If you are interested in making a multi-platform app it is _strongly recommended_ that you use [Expo](https://expo.dev) (or learn from the source code for the Web integration). Expo includes [web support](https://docs.expo.dev/workflow/web/) and takes care of all the configuration work required. --- @@ -26,7 +26,7 @@ Minor platform differences can use the `Platform` module. import { Platform } from 'react-native'; const styles = StyleSheet.create({ - height: (Platform.OS === 'web') ? 200 : 100, + height: Platform.OS === 'web' ? 200 : 100 }); ``` @@ -108,7 +108,7 @@ const imageLoaderConfiguration = { loader: 'url-loader', options: { name: '[name].[ext]', - esModule: false, + esModule: false } } }; @@ -130,10 +130,7 @@ module.exports = { // ...the rest of your config module: { - rules: [ - babelLoaderConfiguration, - imageLoaderConfiguration - ] + rules: [babelLoaderConfiguration, imageLoaderConfiguration] }, resolve: { @@ -144,9 +141,9 @@ module.exports = { // If you're working on a multi-platform React Native app, web-specific // module implementations should be written in files using the extension // `.web.js`. - extensions: [ '.web.js', '.js' ] + extensions: ['.web.js', '.js'] } -} +}; ``` To run in development from the root of your application: diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/react-native-compatibility.md b/packages/react-native-web-docs/src/pages/docs/getting-started/react-native-compatibility.md index 6538ca5eff..f6a8fdbadc 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/react-native-compatibility.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/react-native-compatibility.md @@ -9,7 +9,7 @@ eleventyNavigation: --- :::lead -React Native for Web provides compatibility with the vast majority of React Native's JavaScript API. Features deprecated in React Native should be considered *unsupported* in React Native for Web. +React Native for Web provides compatibility with the vast majority of React Native's JavaScript API. Features deprecated in React Native should be considered _unsupported_ in React Native for Web. ::: **Best used with React Native >= 0.68**. @@ -18,66 +18,66 @@ Visit the [React Native Directory](https://reactnative.directory/?web=true) to f ## Components -| Name | Status | Notes | -| :----------------------- | :----- | :---- | -| ActivityIndicator | ✓ | | -| Button | ✓ | | -| CheckBox | ✓ | | -| FlatList | ✓ | | -| Image | ✓ | Missing multiple sources ([#515](https://github.com/necolas/react-native-web/issues/515)) and HTTP headers ([#1019](https://github.com/necolas/react-native-web/issues/1019)). | -| ImageBackground | ✓ | | -| KeyboardAvoidingView | (✓) | Mock. No equivalent web APIs. | -| Modal | ✓ | | -| Picker | ✓ | | -| Pressable | ✓ | | -| RefreshControl | ✘ | Not started ([#1027](https://github.com/necolas/react-native-web/issues/1027)). | -| SafeAreaView | ✓ | | -| ScrollView | ✓ | Missing momentum scroll events ([#1021](https://github.com/necolas/react-native-web/issues/1021)). | -| SectionList | ✓ | | -| StatusBar | (✓) | Mock. No equivalent web APIs. | -| Switch | ✓ | | -| Text | ✓ | No `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)). | +| Name | Status | Notes | +| :----------------------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ActivityIndicator | ✓ | | +| Button | ✓ | | +| CheckBox | ✓ | | +| FlatList | ✓ | | +| Image | ✓ | Missing multiple sources ([#515](https://github.com/necolas/react-native-web/issues/515)) and HTTP headers ([#1019](https://github.com/necolas/react-native-web/issues/1019)). | +| ImageBackground | ✓ | | +| KeyboardAvoidingView | (✓) | Mock. No equivalent web APIs. | +| Modal | ✓ | | +| Picker | ✓ | | +| Pressable | ✓ | | +| RefreshControl | ✘ | Not started ([#1027](https://github.com/necolas/react-native-web/issues/1027)). | +| SafeAreaView | ✓ | | +| ScrollView | ✓ | Missing momentum scroll events ([#1021](https://github.com/necolas/react-native-web/issues/1021)). | +| SectionList | ✓ | | +| StatusBar | (✓) | Mock. No equivalent web APIs. | +| Switch | ✓ | | +| Text | ✓ | No `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)). | | TextInput | ✓ | Missing rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). | -| Touchable | ✓ | Includes additional support for mouse and keyboard interactions. | -| TouchableHighlight | ✓ | | -| TouchableNativeFeedback | ✘ | Not started ([#1024](https://github.com/necolas/react-native-web/issues/1024)). | -| TouchableOpacity | ✓ | | -| TouchableWithoutFeedback | ✓ | | -| View | ✓ | | -| VirtualizedList | ✓ | | -| YellowBox | (✓) | Mock. No YellowBox functionality. | +| Touchable | ✓ | Includes additional support for mouse and keyboard interactions. | +| TouchableHighlight | ✓ | | +| TouchableNativeFeedback | ✘ | Not started ([#1024](https://github.com/necolas/react-native-web/issues/1024)). | +| TouchableOpacity | ✓ | | +| TouchableWithoutFeedback | ✓ | | +| View | ✓ | | +| VirtualizedList | ✓ | | +| YellowBox | (✓) | Mock. No YellowBox functionality. | ## APIs -| Name | Status | Notes | -| :----------------------- | :----- | :---- | -| AccessibilityInfo | (✓) | Mock. No equivalent web APIs. | -| Alert | ✘ | Not started ([#1026](https://github.com/necolas/react-native-web/issues/1026)). | -| Animated | ✓ | Missing `useNativeDriver` support. | -| Appearance | ✓ | | -| AppRegistry | ✓ | Includes additional support for server rendering with `getApplication`. | -| AppState | ✓ | | -| BackHandler | (✓) | Mock. No equivalent web APIs. | -| Clipboard | ✓ | | -| DeviceInfo | (✓) | Limited information. | -| Dimensions | ✓ | | -| Easing | ✓ | | -| Geolocation | ✓ | | -| I18nManager | (✓) | Mock. See [localization](https://necolas.github.io/react-native-web/docs/localization/) for preferred approach. | -| InteractionManager | (✓) | | -| Keyboard | (✓) | Mock. | -| LayoutAnimation | (✓) | Missing translation to web animations. | -| Linking | ✓ | | -| NativeEventEmitter | ✓ | | -| NativeMethodsMixin | ✓ | | -| NativeModules | (✓) | Mocked. Missing ability to load native modules. | -| PanResponder | ✓ | | -| PixelRatio | ✓ | | -| Platform | ✓ | | -| Settings | ✘ | No equivalent web APIs. | -| Share | ✓ | Only available over HTTPS. Read about the [Web Share API](https://wicg.github.io/web-share/). | -| StyleSheet | ✓ | | -| UIManager | ✓ | | -| Vibration | ✓ | | -| useColorScheme | ✓ | | -| useWindowDimensions | ✓ | | +| Name | Status | Notes | +| :------------------ | :----- | :-------------------------------------------------------------------------------------------------------------- | +| AccessibilityInfo | (✓) | Mock. No equivalent web APIs. | +| Alert | ✘ | Not started ([#1026](https://github.com/necolas/react-native-web/issues/1026)). | +| Animated | ✓ | Missing `useNativeDriver` support. | +| Appearance | ✓ | | +| AppRegistry | ✓ | Includes additional support for server rendering with `getApplication`. | +| AppState | ✓ | | +| BackHandler | (✓) | Mock. No equivalent web APIs. | +| Clipboard | ✓ | | +| DeviceInfo | (✓) | Limited information. | +| Dimensions | ✓ | | +| Easing | ✓ | | +| Geolocation | ✓ | | +| I18nManager | (✓) | Mock. See [localization](https://necolas.github.io/react-native-web/docs/localization/) for preferred approach. | +| InteractionManager | (✓) | | +| Keyboard | (✓) | Mock. | +| LayoutAnimation | (✓) | Missing translation to web animations. | +| Linking | ✓ | | +| NativeEventEmitter | ✓ | | +| NativeMethodsMixin | ✓ | | +| NativeModules | (✓) | Mocked. Missing ability to load native modules. | +| PanResponder | ✓ | | +| PixelRatio | ✓ | | +| Platform | ✓ | | +| Settings | ✘ | No equivalent web APIs. | +| Share | ✓ | Only available over HTTPS. Read about the [Web Share API](https://wicg.github.io/web-share/). | +| StyleSheet | ✓ | | +| UIManager | ✓ | | +| Vibration | ✓ | | +| useColorScheme | ✓ | | +| useWindowDimensions | ✓ | | diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/setup.md b/packages/react-native-web-docs/src/pages/docs/getting-started/setup.md index 5a72ec464d..d074b9abbe 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/setup.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/setup.md @@ -32,7 +32,7 @@ module.exports = { 'react-native$': 'react-native-web' } } -} +}; ``` ### Compiler @@ -79,9 +79,9 @@ Node.js can alias `react-native` to `react-native-web` using [`module-alias`](ht ```js // Install the `module-alias` package as a dependency first -const moduleAlias = require("module-alias"); +const moduleAlias = require('module-alias'); moduleAlias.addAliases({ - "react-native": require.resolve("react-native-web"), + 'react-native': require.resolve('react-native-web') }); moduleAlias(); ``` @@ -119,9 +119,17 @@ Full-screen React Native apps with a root `` may require the followi ```css /* These styles make the body full-height */ -html, body { height: 100%; } +html, +body { + height: 100%; +} /* These styles disable body scrolling if you are using */ -body { overflow: hidden; } +body { + overflow: hidden; +} /* These styles make the root element full-height */ -#root { display:flex; height:100%; } +#root { + display: flex; + height: 100%; +} ``` diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md b/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md index d35649758b..1b63197952 100644 --- a/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md +++ b/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md @@ -51,12 +51,12 @@ Now you can use `react-native` components in your project with TS support to `re import { View, ViewStyle } from 'react-native'; const style: ViewStyle = { - position: "fixed", // RN style properties are augmented with Web-only options e.g. 'fixed' - marginBlock: "auto", // All Web CSS style properties are also available to use + position: 'fixed', // RN style properties are augmented with Web-only options e.g. 'fixed' + marginBlock: 'auto' // All Web CSS style properties are also available to use }; +/>; ``` diff --git a/packages/react-native-web-docs/src/pages/docs/hooks/use-color-scheme.md b/packages/react-native-web-docs/src/pages/docs/hooks/use-color-scheme.md index a75ef3504f..e3590deb50 100644 --- a/packages/react-native-web-docs/src/pages/docs/hooks/use-color-scheme.md +++ b/packages/react-native-web-docs/src/pages/docs/hooks/use-color-scheme.md @@ -3,7 +3,7 @@ title: useColorScheme date: Last Modified permalink: /docs/use-color-scheme/index.html eleventyNavigation: - key: useColorScheme + key: useColorScheme parent: Hooks --- diff --git a/packages/react-native-web-docs/src/pages/docs/hooks/use-window-dimensions.md b/packages/react-native-web-docs/src/pages/docs/hooks/use-window-dimensions.md index 7d9528e1f7..9270587727 100644 --- a/packages/react-native-web-docs/src/pages/docs/hooks/use-window-dimensions.md +++ b/packages/react-native-web-docs/src/pages/docs/hooks/use-window-dimensions.md @@ -3,7 +3,7 @@ title: useWindowDimensions date: Last Modified permalink: /docs/use-window-dimensions/index.html eleventyNavigation: - key: useWindowDimensions + key: useWindowDimensions parent: Hooks --- diff --git a/packages/react-native-web-examples/.babelrc b/packages/react-native-web-examples/.babelrc index e1cd250e15..314daa2344 100644 --- a/packages/react-native-web-examples/.babelrc +++ b/packages/react-native-web-examples/.babelrc @@ -1,9 +1,4 @@ { - "presets": [ - "next/babel", - "@babel/preset-flow" - ], - "plugins": [ - [ "react-native-web", { "commonjs": true } ] - ] + "presets": ["next/babel", "@babel/preset-flow"], + "plugins": [["react-native-web", { "commonjs": true }]] } diff --git a/packages/react-native-web/README.md b/packages/react-native-web/README.md index 4eb51b6460..6aba0dcb9e 100644 --- a/packages/react-native-web/README.md +++ b/packages/react-native-web/README.md @@ -35,7 +35,9 @@ const styles = StyleSheet.create({ }); AppRegistry.registerComponent('App', () => App); -AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') }); +AppRegistry.runApplication('App', { + rootTag: document.getElementById('react-root') +}); ``` ## Contributing diff --git a/packages/react-native-web/src/modules/useResponderEvents/README.md b/packages/react-native-web/src/modules/useResponderEvents/README.md index 34eef0c498..b537330201 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/README.md +++ b/packages/react-native-web/src/modules/useResponderEvents/README.md @@ -7,8 +7,8 @@ NOTE: Although the responder events mention only `touches`, this is for historic ## How it works A view can become the "responder" after the following native events: `scroll`, `selectionchange`, `touchstart`, `touchmove`, `mousedown`, `mousemove`. If nothing is already the "responder", the event propagates to (capture) and from (bubble) the event target until a view returns `true` for `on*ShouldSetResponder(Capture)`. - -If something is *already* the responder, the negotiation event propagates to (capture) and from (bubble) the lowest common ancestor of the event target and the current responder. Then negotiation happens between the current responder and the view that wants to become the responder. + +If something is _already_ the responder, the negotiation event propagates to (capture) and from (bubble) the lowest common ancestor of the event target and the current responder. Then negotiation happens between the current responder and the view that wants to become the responder. ## API @@ -33,17 +33,17 @@ function View(props) { onResponderTerminationRequest: props.onResponderTerminationRequest, onScrollShouldSetResponder: props.onScrollShouldSetResponder, onScrollShouldSetResponderCapture: props.onScrollShouldSetResponderCapture, - onSelectionChangeShouldSetResponder: props.onSelectionChangeShouldSetResponder, - onSelectionChangeShouldSetResponderCapture: props.onSelectionChangeShouldSetResponderCapture, + onSelectionChangeShouldSetResponder: + props.onSelectionChangeShouldSetResponder, + onSelectionChangeShouldSetResponderCapture: + props.onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder: props.onStartShouldSetResponder, onStartShouldSetResponderCapture: props.onStartShouldSetResponderCapture - } + }; useResponderEvents(hostRef, callbacks); - return ( -
- ); + return
; } ``` @@ -91,7 +91,7 @@ The responder has been taken from this view. It may have been taken by another v ### Responder lifecycle -If a view is the responder, the following methods will be called only for this view (i.e., no bubbling.) These methods are *always* bookended by `onResponderGrant` (before) and either `onResponderRelease` or `onResponderTerminate` (after). +If a view is the responder, the following methods will be called only for this view (i.e., no bubbling.) These methods are _always_ bookended by `onResponderGrant` (before) and either `onResponderRelease` or `onResponderTerminate` (after). #### onResponderStart @@ -107,7 +107,7 @@ A pointer up event occured on the screen. The responder is notified of all end e #### onResponderRelease -As soon as there are no more pointers that *started* inside descendants of the responder, this method is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over. +As soon as there are no more pointers that _started_ inside descendants of the responder, this method is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over. ### Responder events