Merge branch 'master' into react-18-deprecation-fixes

Author: edkimmel

.github/CONTRIBUTING.md

@@ -99,17 +99,13 @@ Please open an issue with a proposal for a new feature or refactoring before sta
 3. If you've changed APIs, update the documentation.
 4. Ensure the tests pass (`npm run test`).
 
-You should see a pre-commit hook run before each commit. If it does not, you may need to reset you Git hookspath:
-
-```
-git config --unset core.hookspath
-```
+You should see a pre-commit hook run before each commit.
 
 You can now submit a pull request, referencing any issues it addresses.
 
 Please try to keep your pull request focused in scope and avoid including unrelated commits.
 
-After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
+After you have submitted your pull request, it's recommended that **you** perform the first code review. We'll try to get back to you as soon as possible and may suggest changes.
 
 Thank you for contributing!
 
@@ -118,7 +114,7 @@ Thank you for contributing!
 To commit, publish, and push a final version:
 
 ```
-npm run release -- <version>
+npm run release -- <version> --opt=<opt-code>
 ```
 
 Release candidates or versions that you'd like to publish to npm, but do not want to produce a commit and push it to GitHub:

.github/ISSUE_TEMPLATE/bug.yml

@@ -16,19 +16,19 @@ body:
   - type: textarea
     attributes:
       label: Describe the issue
-      description: A concise description of what you're experiencing. Providing screenshots is also helpful.
+      description: Please provide a concise description of what you're experiencing. Providing screenshots is also helpful.
     validations:
       required: true
   - type: textarea
     attributes:
       label: Expected behavior
-      description: A concise description of what you expected to happen.
+      description: Please provide a concise description of what you expected to happen.
     validations:
       required: true
   - type: textarea
     attributes:
       label: Steps to reproduce
-      description: Steps to reproduce the behavior.
+      description: Please describe the precise steps needed to reproduce the behavior.
       placeholder: |
         Mention package versions and environment (browser, etc)...
         1. ...
@@ -38,7 +38,11 @@ body:
   - type: input
     attributes:
       label: Test case
-      description: Please provide a link to a test case reproducing the issue
+      description: Please provide a link to a reduced test case that reproduces the issue.
       placeholder: "https://codesandbox.io/s/6lx6ql1w5r"
     validations:
       required: true
+  - type: textarea
+    attributes:
+      label: Additional comments
+      description: You're welcome to provide additional context and proposed solutions.

.github/ISSUE_TEMPLATE/feature.yml

@@ -5,7 +5,7 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thank you for reporting suggesting a feature!
+        Thank you for suggesting a feature!
   - type: checkboxes
     attributes:
       label: Is there an existing request?
@@ -16,6 +16,6 @@ body:
   - type: textarea
     attributes:
       label: Describe the feature request
-      description: A concise description of the request, potential solutions, and addtional context.
+      description: Please provide a concise description of the request, potential solutions, and addtional context.
     validations:
       required: true

configs/babel.config.js

@@ -1,15 +1,22 @@
-module.exports = function (api) {
-  if (api) {
-    api.cache(true);
-  }
-
-  let modules = false;
-
-  if (process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test') {
-    modules = 'commonjs';
-  }
+const createConfig = ({ modules }) => {
+  const plugins = [
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        version: '7.18.6'
+      }
+    ]
+  ].concat(modules ? ['babel-plugin-add-module-exports'] : []);
 
   return {
+    assumptions: {
+      iterableIsArray: true
+    },
+    comments: true,
     presets: [
       [
         '@babel/preset-env',
@@ -19,36 +26,31 @@ module.exports = function (api) {
           exclude: ['transform-typeof-symbol'],
           targets: {
             browsers: [
-              'chrome 38',
-              'android 4',
-              'firefox 40',
-              'ios_saf 7',
-              'safari 7',
-              'ie 10',
-              'ie_mob 11',
-              'edge 12',
-              'opera 16',
-              'op_mini 12',
-              'and_uc 9',
-              'and_chr 38'
+              'chrome 49',
+              // https://www.mozilla.org/en-US/firefox/all/#product-desktop-esr
+              'firefox 91',
+              'ios_saf 10',
+              'safari 10',
+              // https://docs.microsoft.com/en-us/DeployEdge/microsoft-edge-support-lifecycle
+              'edge 94',
+              'opera 36'
             ]
           }
         }
       ],
       '@babel/preset-react',
       '@babel/preset-flow'
     ],
-    plugins: [
-      '@babel/plugin-transform-flow-strip-types',
-      ['@babel/plugin-proposal-class-properties', { loose: true }],
-      ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
-      '@babel/plugin-proposal-nullish-coalescing-operator',
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          version: '7.18.6'
-        }
-      ]
-    ].concat(modules ? ['babel-plugin-add-module-exports'] : [])
+    plugins: plugins
   };
 };
+
+module.exports = function (api) {
+  if (api) {
+    api.cache(true);
+  }
+
+  return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'
+    ? createConfig({ modules: 'commonjs' })
+    : createConfig({ modules: false });
+};

packages/babel-plugin-react-native-web/package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "babel-plugin-react-native-web",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/react-native-web-docs/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-web-docs",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "description": "Documentation website for React Native for Web",
   "scripts": {
     "dev": "eleventy --serve",

packages/react-native-web-docs/src/pages/docs/apis/appearance.md

@@ -10,7 +10,7 @@ eleventyNavigation:
 {% import "fragments/macros.html" as macro with context %}
 
 :::lead
-The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark). 
+The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
 :::
 
 ```js
@@ -23,6 +23,10 @@ import { Appearance } from 'react-native';
 
 ### Static methods
 
+{% call macro.prop('addChangeListener', '(listener) => { remove: () => void }') %}
+Add an event handler that is called with `{colorScheme: "dark" | "light"}` when appearance preferences change. Returns a `remove` method used to remove the change listener.
+{% endcall %}
+
 {% call macro.prop('getColorScheme', '() => ("dark" | "light")') %}
 You can use the Appearance module to determine if the user prefers a dark color scheme. Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value.
 {% endcall %}

packages/react-native-web-docs/src/pages/docs/components/scoll-view.md

@@ -31,11 +31,14 @@ import { ScrollView } from 'react-native';
 All the props supported by [View]({{ '/docs/view' | url }}).
 {% endcall %}
 
+{% call macro.prop('centerContent', '?boolean') %}
+When `true`, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect.
+{% endcall %}
+
 {% call macro.prop('contentContainerStyle', '?Style') %}
 These styles will be applied to the scroll view content container which wraps all of the child views.
 {% endcall %}
 
-
 {% call macro.prop('disableScrollViewPanResponder', '?boolean = false') %}
 When `true`, the default `PanResponder` on the `ScrollView` is disabled, and full control over pointers inside the `ScrollView` is left to its child components. This is meant to be used when native "snap-to" scrolling behavior is needed.
 {% endcall %}

packages/react-native-web-examples/package.json

@@ -1,18 +1,18 @@
 {
   "private": true,
   "name": "react-native-web-examples",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "scripts": {
     "build": "next build",
     "dev": "next",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-react-native-web": "0.18.4",
+    "babel-plugin-react-native-web": "0.18.6",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.18.4"
+    "react-native-web": "0.18.6"
   },
   "license": "MIT"
 }

packages/react-native-web/package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "react-native-web",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",