Sync fork with upstream

configs/.flowconfig

@@ -6,11 +6,14 @@
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/react-native-web-docs/.*
 <PROJECT_ROOT>/packages/react-native-web-examples/.*
-.*/node_modules/.*/.*.json
 
 [include]
 
+[declarations]
+.*/node_modules/.*
+
 [libs]
 
 [options]
+indexed_access=true
 munge_underscores=true

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.19.1",
+  "version": "0.19.4",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/babel-plugin-react-native-web/src/moduleMap.js

@@ -7,6 +7,7 @@ module.exports = {
   AppRegistry: true,
   AppState: true,
   Appearance: true,
+  BackHandler: true,
   Button: true,
   CheckBox: true,
   Clipboard: true,

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

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

packages/react-native-web-examples/next.config.js

@@ -7,6 +7,9 @@ const pages = fs
   .map((dirent) => dirent.name);
 
 module.exports = {
-  outDir: 'dist',
-  env: { pages }
+  env: { pages },
+  webpack: (config, options) => {
+    config.resolve.alias['react-native'] = 'react-native-web';
+    return config;
+  }
 };

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

@@ -1,18 +1,18 @@
 {
   "private": true,
   "name": "react-native-web-examples",
-  "version": "0.19.1",
+  "version": "0.19.4",
   "scripts": {
     "build": "next build",
     "dev": "next",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-react-native-web": "0.19.1",
+    "babel-plugin-react-native-web": "0.19.4",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.19.1"
+    "react-native-web": "0.19.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",

packages/react-native-web-examples/pages/checkbox/index.js

@@ -25,7 +25,7 @@ export default function CheckboxPage() {
         <Divider />
         <CheckBox disabled style={styles.item} value={true} />
         <Divider />
-        <CheckBox accessibilityReadOnly style={styles.item} value={true} />
+        <CheckBox aria-readonly style={styles.item} value={true} />
       </View>
       <View style={styles.row}>
         <CheckBox value={false} />

packages/react-native-web-examples/pages/clipboard/index.js

@@ -1,5 +1,6 @@
-import { Button, Clipboard, StyleSheet, TextInput, View } from 'react-native';
+import { Clipboard, StyleSheet, TextInput, View } from 'react-native';
 import React from 'react';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 export default function ClipboardPage() {

packages/react-native-web-examples/pages/image/index.js

@@ -59,7 +59,11 @@ export default function ImagePage() {
       <View style={styles.row}>
         <View style={styles.column}>
           <Text style={styles.text}>Static image</Text>
-          <Image source={'/image/ladybug.jpg'} style={styles.image} />
+          <Image
+            resizeMode="cover"
+            source={'/image/ladybug.jpg'}
+            style={styles.image}
+          />
         </View>
         <View style={styles.column}>
           <Text style={styles.text}>Progressive JPEG</Text>
@@ -166,8 +170,7 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     borderWidth: 0.5,
     height: 120,
-    width: 120,
-    resizeMode: 'cover'
+    width: 120
   },
   resizeMode: {
     borderColor: 'black',

packages/react-native-web-examples/pages/index.js

@@ -8,11 +8,7 @@ const logoUri =
 function Link(props) {
   return (
     <NextLink href={props.href}>
-      <Text
-        {...props}
-        accessibilityRole="link"
-        style={[styles.link, props.style]}
-      />
+      <Text {...props} role="link" style={[styles.link, props.style]} />
     </NextLink>
   );
 }
@@ -22,7 +18,7 @@ export default function IndexPage() {
     <View style={styles.app}>
       <View style={styles.header}>
         <Image
-          accessibilityLabel="React logo"
+          aria-label="React logo"
           resizeMode="contain"
           source={{ uri: logoUri }}
           style={styles.logo}
@@ -36,9 +32,9 @@ export default function IndexPage() {
         example app built on Next.js
       </Text>
 
-      <View accessibilityRole="list">
+      <View role="list">
         {process.env.pages.map((name) => (
-          <View accessibilityRole="listitem" key={name} style={styles.listitem}>
+          <View key={name} role="listitem" style={styles.listitem}>
             <Link href={'/' + name} style={styles.pageLink}>
               {name}
             </Link>
@@ -77,11 +73,11 @@ const styles = StyleSheet.create({
     color: '#1977f2'
   },
   listitem: {
-    marginVertical: '0.5rem',
-    textAlign: 'center'
+    marginVertical: '0.5rem'
   },
   pageLink: {
     fontSize: '1.25rem',
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    textAlign: 'center'
   }
 });

packages/react-native-web-examples/pages/linking/index.js

@@ -1,35 +1,48 @@
 import { Linking, StyleSheet, Text } from 'react-native';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import Example from '../../shared/example';
 
 const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
 
-export default class LinkingPage extends PureComponent {
-  handlePress() {
+export default function LinkingPage(props) {
+  const [, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    console.log('adding listener');
+    const listener = Linking.addEventListener('onOpen', () => {
+      console.log('onOpen event');
+    });
+    return () => {
+      console.log('removing listener');
+      listener.remove();
+    };
+  });
+
+  function handlePress() {
     Linking.canOpenURL(url).then((supported) => {
-      return Linking.openURL(url);
+      setCount((x) => x + 1);
+      const v = Linking.openURL(url);
+      return v;
     });
   }
 
-  render() {
-    return (
-      <Example title="Linking">
-        <Text onPress={this.handlePress} style={styles.text}>
-          Linking.openURL
-        </Text>
-        <Text
-          accessibilityRole="link"
-          href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
-          hrefAttrs={{
-            target: '_blank'
-          }}
-          style={styles.text}
-        >
-          target="_blank"
-        </Text>
-      </Example>
-    );
-  }
+  return (
+    <Example title="Linking">
+      <Text onPress={handlePress} style={styles.text}>
+        Linking.openURL
+      </Text>
+      <Text
+        href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
+        hrefAttrs={{
+          target: '_blank'
+        }}
+        role="link"
+        style={styles.text}
+      >
+        target="_blank"
+      </Text>
+    </Example>
+  );
 }
 
 const styles = StyleSheet.create({