Update interactive examples

robinheinze · Apr 12, 2023 · 3e74ed0 · 3e74ed0
1 parent 338cce1
commit 3e74ed0
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 84 deletions.
diff --git a/packages/react-native-web-examples/next.config.js b/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;
+  }
 };
diff --git a/packages/react-native-web-examples/pages/clipboard/index.js b/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() {

diff --git a/packages/react-native-web-examples/pages/image/index.js b/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,
-    resizeMode: 'cover'
+    width: 120
   },
   resizeMode: {
     borderColor: 'black',

diff --git a/packages/react-native-web-examples/pages/index.js b/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>

diff --git a/packages/react-native-web-examples/pages/linking/index.js b/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"

diff --git a/packages/react-native-web-examples/pages/lists/index.js b/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
-        onHideUnderlay={this.props.onHideUnderlay}
+      <Pressable
         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],
-                  outputRange: ['0deg', '360deg'],
-                  extrapolate: 'extend'
-                })
-              }
-            ]
+            rotate: this.props.value.interpolate({
+              inputRange: [0, 5000],
+              outputRange: ['0deg', '360deg'],
+              extrapolate: 'extend'
+            })
           }
         ]}
       />
@@ -263,9 +256,7 @@ class SingleColumnExample extends React.PureComponent {
   };
 
   _onChangeScrollToIndex = (text) => {
-    this._listRef
-      .getNode()
-      .scrollToIndex({ viewPosition: 0.5, index: Number(text) });
+    this._listRef.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',

diff --git a/packages/react-native-web-examples/pages/localization/index.js b/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
-      accessibilityLabel="Change layout direction"
+    <Pressable
+      aria-label="Change layout direction"
       color="gray"
       onPress={toggleRTL}
-      title={isRTL ? 'RTL' : 'LTR'}
-    />
+    >
+      <Text>{isRTL ? 'RTL' : 'LTR'}</Text>
+    </Pressable>
   );
 };
 

diff --git a/packages/react-native-web-examples/pages/modal/index.js b/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() {

diff --git a/packages/react-native-web-examples/pages/pan-responder/index.js b/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}>

diff --git a/packages/react-native-web-examples/pages/pressable/index.js b/packages/react-native-web-examples/pages/pressable/index.js
@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-  Pressable
-} from 'react-native';
+import { ScrollView, StyleSheet, View, Text, Pressable } from 'react-native';
+import Button from '../../shared/button';
 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,

diff --git a/packages/react-native-web-examples/pages/scroll-view/index.js b/packages/react-native-web-examples/pages/scroll-view/index.js
@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  Pressable,
-  View
-} from 'react-native';
+import { ScrollView, StyleSheet, Text, Pressable, View } from 'react-native';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);

diff --git a/packages/react-native-web-examples/pages/text-input/index.js b/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)"
-          editable={false}
+          defaultValue="readOnly (true)"
+          readOnly={true}
           style={styles.textinput}
         />
         <TextInput
-          keyboardType="numeric"
-          placeholder="keyboardType 'numeric'"
+          inputMode="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>

diff --git a/packages/react-native-web-examples/pages/text/index.js b/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 },
-          textShadowRadius: 1,
-          textShadowColor: '#00cccc'
+          textShadow: '2px 2px 1px #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
-          click-and-hold.
+          <Text style={{ fontWeight: 'bold', userSelect: 'none' }}>
+            not selectable
+          </Text>{' '}
+          if you click-and-hold.
         </Text>
 
         <View style={{ paddingVertical: 20 }}>