Update interactive examples

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

@@ -8,5 +8,9 @@ const pages = fs
 
 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/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

@@ -47,7 +47,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>
@@ -143,8 +147,7 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     borderWidth: 0.5,
     height: 120,
-    width: 120,
+    width: 120
-    resizeMode: 'cover'
   },
   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
+      <Text {...props} role="link" style={[styles.link, props.style]} />
-        {...props}
-        accessibilityRole="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>

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

@@ -18,11 +18,11 @@ export default class LinkingPage extends PureComponent {
           Linking.openURL
         </Text>
         <Text
-          accessibilityRole="link"
           href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
           hrefAttrs={{
             target: '_blank'
           }}
+          role="link"
           style={styles.text}
         >
           target="_blank"

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

@@ -15,7 +15,7 @@ import {
   Image,
   StyleSheet,
   Switch,
-  TouchableHighlight,
+  Pressable,
   Text,
   TextInput,
   View
@@ -92,14 +92,11 @@ class ItemComponent extends React.PureComponent<{
     const itemHash = Math.abs(hashCode(item.title));
     const imgSource = THUMB_URLS[itemHash % THUMB_URLS.length];
     return (
-      <TouchableHighlight
+      <Pressable
-        onHideUnderlay={this.props.onHideUnderlay}
         onPress={this._onPress}
-        onShowUnderlay={this.props.onShowUnderlay}
+        onPressIn={this.props.onShowUnderlay}
+        onPressOut={this.props.onHideUnderlay}
         style={horizontal ? styles.horizItem : styles.item}
-        tvParallaxProperties={{
-          pressMagnification: 1.1
-        }}
       >
         <View
           style={[
@@ -116,7 +113,7 @@ class ItemComponent extends React.PureComponent<{
             {item.title} - {item.text}
           </Text>
         </View>
-      </TouchableHighlight>
+      </Pressable>
     );
   }
 }
@@ -172,15 +169,11 @@ class Spindicator extends React.PureComponent<{}> {
         style={[
           styles.spindicator,
           {
-            transform: [
+            rotate: this.props.value.interpolate({
-              {
+              inputRange: [0, 5000],
-                rotate: this.props.value.interpolate({
+              outputRange: ['0deg', '360deg'],
-                  inputRange: [0, 5000],
+              extrapolate: 'extend'
-                  outputRange: ['0deg', '360deg'],
+            })
-                  extrapolate: 'extend'
-                })
-              }
-            ]
           }
         ]}
       />
@@ -263,9 +256,7 @@ class SingleColumnExample extends React.PureComponent {
   };
 
   _onChangeScrollToIndex = (text) => {
-    this._listRef
+    this._listRef.scrollToIndex({ viewPosition: 0.5, index: Number(text) });
-      .getNode()
-      .scrollToIndex({ viewPosition: 0.5, index: Number(text) });
   };
 
   _scrollPos = new Animated.Value(0);
@@ -283,7 +274,7 @@ class SingleColumnExample extends React.PureComponent {
   );
 
   componentDidUpdate() {
-    this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
+    this._listRef.recordInteraction(); // e.g. flipping logViewable switch
   }
 
   render() {
@@ -398,7 +389,7 @@ class SingleColumnExample extends React.PureComponent {
     }
   };
   _pressItem = (key: string) => {
-    this._listRef.getNode().recordInteraction();
+    this._listRef.recordInteraction();
     pressItem(this, key);
   };
   _listRef: AnimatedFlatList;
@@ -469,7 +460,7 @@ const styles = StyleSheet.create({
   smallSwitch: {
     top: 1,
     margin: -6,
-    transform: [{ scale: 0.7 }]
+    transform: 'scale(0.7)'
   },
   stacked: {
     alignItems: 'center',

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

@@ -12,9 +12,9 @@
 
 import React from 'react';
 import {
-  Button,
   Image,
   PixelRatio,
+  Pressable,
   ScrollView,
   StyleSheet,
   Text,
@@ -41,7 +41,9 @@ function ListItem(props) {
         </View>
       </View>
       <View style={styles.column3}>
-        <Button onPress={() => {}} style={styles.smallButton} title="Button" />
+        <Pressable onPress={() => {}} style={styles.smallButton}>
+          <Text>Button</Text>
+        </Pressable>
       </View>
     </View>
   );
@@ -88,12 +90,13 @@ function withRTLState(Component) {
 const RTLToggler = ({ isRTL, setRTL }) => {
   const toggleRTL = () => setRTL(!isRTL);
   return (
-    <Button
+    <Pressable
-      accessibilityLabel="Change layout direction"
+      aria-label="Change layout direction"
       color="gray"
       onPress={toggleRTL}
-      title={isRTL ? 'RTL' : 'LTR'}
+    >
-    />
+      <Text>{isRTL ? 'RTL' : 'LTR'}</Text>
+    </Pressable>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
-import { Modal, View, Text, Button, StyleSheet } from 'react-native';
+import { Modal, View, Text, StyleSheet } from 'react-native';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 function Gap() {

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

@@ -121,7 +121,7 @@ class LocationXY extends React.Component {
   };
 
   render() {
-    const transform = { transform: `translateX${this.state.translateX}` };
+    const transform = { transform: `translateX(${this.state.translateX}px)` };
     return (
       <View style={styles.box}>
         <View style={styles.outer} {...this.panResponder.panHandlers}>

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

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
+import { ScrollView, StyleSheet, View, Text, Pressable } from 'react-native';
-  Button,
+import Button from '../../shared/button';
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-  Pressable
-} from 'react-native';
 import Example from '../../shared/example';
 
 export default function PressablePage() {
@@ -29,7 +23,6 @@ export default function PressablePage() {
     <Example title="Pressable">
       <View style={styles.container}>
         <Pressable
-          accessibilityRole="button"
           delayLongPress="750"
           delayPressIn={delay}
           delayPressOut={delay}
@@ -45,6 +38,7 @@ export default function PressablePage() {
           onPress={handleEvent(`onPress - ${delay}ms delay`)}
           onPressIn={handleEvent(`onPressIn - ${delay}ms delay`)}
           onPressOut={handleEvent(`oPressOut - ${delay}ms delay`)}
+          role="button"
           style={(state) => [
             styles.pressable,
             !disabled && state.focused && styles.focused,

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

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
+import { ScrollView, StyleSheet, Text, Pressable, View } from 'react-native';
-  Button,
+import Button from '../../shared/button';
-  ScrollView,
-  StyleSheet,
-  Text,
-  Pressable,
-  View
-} from 'react-native';
 import Example from '../../shared/example';
 
 const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);

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

@@ -39,13 +39,13 @@ export default function TextInputPage() {
           style={styles.textinput}
         />
         <TextInput
-          defaultValue="editable (false)"
+          defaultValue="readOnly (true)"
-          editable={false}
+          readOnly={true}
           style={styles.textinput}
         />
         <TextInput
-          keyboardType="numeric"
+          inputMode="numeric"
-          placeholder="keyboardType 'numeric'"
+          placeholder="inputMode 'numeric'"
           style={styles.textinput}
         />
         <TextInput
@@ -71,8 +71,8 @@ export default function TextInputPage() {
         />
         <TextInput
           multiline={true}
-          numberOfLines={3}
           placeholder="multiline"
+          rows={3}
           style={styles.multiline}
         />
       </View>

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

@@ -6,8 +6,8 @@ const Spacer = () => <View style={{ height: '1rem' }} />;
 
 const Heading = ({ children }) => (
   <Text
-    accessibilityRole="heading"
     children={children}
+    role="heading"
     style={{ fontSize: '1rem', fontWeight: 'bold', marginBottom: '0.5rem' }}
   />
 );
@@ -298,9 +298,7 @@ function TextShadow() {
       <Text
         style={{
           fontSize: 20,
-          textShadowOffset: { width: 2, height: 2 },
+          textShadow: '2px 2px 1px #00cccc'
-          textShadowRadius: 1,
-          textShadowColor: '#00cccc'
         }}
       >
         Text shadow example
@@ -383,8 +381,9 @@ export default function TextPage() {
           />{' '}
           and an inline image{' '}
           <Image
+            resizeMode="cover"
             source={{ uri: 'http://lorempixel.com/30/11' }}
-            style={{ width: 30, height: 11, resizeMode: 'cover' }}
+            style={{ width: 30, height: 11 }}
           />
           .
         </Text>
@@ -412,14 +411,16 @@ export default function TextPage() {
           And then continues as text.
         </Text>
 
-        <Text selectable={true}>
+        <Text>
           This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if
           you click-and-hold.
         </Text>
-        <Text selectable={false}>
+        <Text>
           This text is{' '}
-          <Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
+          <Text style={{ fontWeight: 'bold', userSelect: 'none' }}>
-          click-and-hold.
+            not selectable
+          </Text>{' '}
+          if you click-and-hold.
         </Text>
 
         <View style={{ paddingVertical: 20 }}>

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

@@ -13,8 +13,11 @@ function Box({ pointerEvents }) {
   return (
     <Pressable
       onPress={log}
-      pointerEvents={pointerEvents}
+      style={({ pressed }) => [
-      style={({ pressed }) => [styles.box, pressed && styles.purple]}
+        styles.box,
+        pressed && styles.purple,
+        pointerEventsStyles[pointerEvents]
+      ]}
     >
       <Pressable
         onPress={log}
@@ -46,7 +49,7 @@ export default function ViewPage() {
   return (
     <Example title="View">
       <View style={styles.container}>
-        <Text accessibilityRole="heading" style={styles.heading}>
+        <Text role="heading" style={styles.heading}>
           onLayout
         </Text>
         <View>
@@ -56,11 +59,11 @@ export default function ViewPage() {
           <Text>{JSON.stringify(layoutInfo, null, 2)}</Text>
         </View>
 
-        <Text accessibilityRole="heading" style={styles.heading}>
+        <Text role="heading" style={styles.heading}>
           pointerEvents
         </Text>
-        <View pointerEvents="box-none">
+        <View style={pointerEventsStyles['box-none']}>
-          <View pointerEvents="box-none" style={styles.boxContainer}>
+          <View style={[styles.boxContainer, pointerEventsStyles['box-none']]}>
             <Box pointerEvents="none" />
             <Box pointerEvents="auto" />
             <Box pointerEvents="box-only" />
@@ -112,3 +115,18 @@ const styles = StyleSheet.create({
     backgroundColor: 'purple'
   }
 });
+
+const pointerEventsStyles = StyleSheet.create({
+  auto: {
+    pointerEvents: 'auto'
+  },
+  none: {
+    pointerEvents: 'none'
+  },
+  'box-only': {
+    pointerEvents: 'box-only'
+  },
+  'box-none': {
+    pointerEvents: 'box-none'
+  }
+});

packages/react-native-web-examples/shared/button.js

@@ -0,0 +1,23 @@
+import { StyleSheet, Text, Pressable } from 'react-native';
+
+export default function Button(props) {
+  const { title, ...other } = props;
+  return (
+    <Pressable {...other} style={styles.button}>
+      <Text style={styles.buttonText}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'lightblue',
+    borderRadius: 10,
+    paddingBlock: 5,
+    paddingInline: 10
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    textTransform: 'uppercase'
+  }
+});

packages/react-native-web-examples/shared/example.js

@@ -4,7 +4,7 @@ export default function Example(props) {
   return (
     <View style={styles.root}>
       <View style={styles.header}>
-        <Text accessibilityLabel="Back" href="/" style={styles.back}>
+        <Text aria-label="Back" href="/" style={styles.back}>
           <svg
             style={{ fill: '#555', height: '100%' }}
             viewBox="0 0 140 140"
@@ -13,7 +13,7 @@ export default function Example(props) {
             <path d="M105.614 118.681c3.398 3.396 3.4 8.912 0 12.311-3.396 3.399-8.91 3.398-12.311 0-.02-.02-.035-.04-.053-.061l-.025.022-57.66-57.66.024-.022a8.664 8.664 0 01-2.608-6.208 8.672 8.672 0 013.229-6.762l-.06-.058 57.66-57.66.025.024c.018-.021.033-.039.053-.058A8.706 8.706 0 01106.2 14.86c-.021.02-.041.034-.061.054l.023.024-52.119 52.125 51.54 51.54-.025.021c.015.022.036.036.056.057" />
           </svg>
         </Text>
-        <Text accessibilityRole="heading" style={styles.title}>
+        <Text role="heading" style={styles.title}>
           {props.title}
         </Text>
       </View>