Skip to content

Commit 3e74ed0

Browse files
necolasnecolas
committed
Update interactive examples
1 parent 338cce1 commit 3e74ed0

File tree

16 files changed

+113
-84
lines changed

16 files changed

+113
-84
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ const pages = fs
88

99
module.exports = {
1010
outDir: 'dist',
11-
env: { pages }
11+
env: { pages },
12+
webpack: (config, options) => {
13+
config.resolve.alias['react-native'] = 'react-native-web';
14+
return config;
15+
}
1216
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Button, Clipboard, StyleSheet, TextInput, View } from 'react-native';
1+
import { Clipboard, StyleSheet, TextInput, View } from 'react-native';
22
import React from 'react';
3+
import Button from '../../shared/button';
34
import Example from '../../shared/example';
45

56
export default function ClipboardPage() {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ export default function ImagePage() {
4747
<View style={styles.row}>
4848
<View style={styles.column}>
4949
<Text style={styles.text}>Static image</Text>
50-
<Image source={'/image/ladybug.jpg'} style={styles.image} />
50+
<Image
51+
resizeMode="cover"
52+
source={'/image/ladybug.jpg'}
53+
style={styles.image}
54+
/>
5155
</View>
5256
<View style={styles.column}>
5357
<Text style={styles.text}>Progressive JPEG</Text>
@@ -143,8 +147,7 @@ const styles = StyleSheet.create({
143147
borderColor: 'black',
144148
borderWidth: 0.5,
145149
height: 120,
146-
width: 120,
147-
resizeMode: 'cover'
150+
width: 120
148151
},
149152
resizeMode: {
150153
borderColor: 'black',

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@ const logoUri =
88
function Link(props) {
99
return (
1010
<NextLink href={props.href}>
11-
<Text
12-
{...props}
13-
accessibilityRole="link"
14-
style={[styles.link, props.style]}
15-
/>
11+
<Text {...props} role="link" style={[styles.link, props.style]} />
1612
</NextLink>
1713
);
1814
}
@@ -22,7 +18,7 @@ export default function IndexPage() {
2218
<View style={styles.app}>
2319
<View style={styles.header}>
2420
<Image
25-
accessibilityLabel="React logo"
21+
aria-label="React logo"
2622
resizeMode="contain"
2723
source={{ uri: logoUri }}
2824
style={styles.logo}
@@ -36,9 +32,9 @@ export default function IndexPage() {
3632
example app built on Next.js
3733
</Text>
3834

39-
<View accessibilityRole="list">
35+
<View role="list">
4036
{process.env.pages.map((name) => (
41-
<View accessibilityRole="listitem" key={name} style={styles.listitem}>
37+
<View key={name} role="listitem" style={styles.listitem}>
4238
<Link href={'/' + name} style={styles.pageLink}>
4339
{name}
4440
</Link>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export default class LinkingPage extends PureComponent {
1818
Linking.openURL
1919
</Text>
2020
<Text
21-
accessibilityRole="link"
2221
href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
2322
hrefAttrs={{
2423
target: '_blank'
2524
}}
25+
role="link"
2626
style={styles.text}
2727
>
2828
target="_blank"

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

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
Image,
1616
StyleSheet,
1717
Switch,
18-
TouchableHighlight,
18+
Pressable,
1919
Text,
2020
TextInput,
2121
View
@@ -92,14 +92,11 @@ class ItemComponent extends React.PureComponent<{
9292
const itemHash = Math.abs(hashCode(item.title));
9393
const imgSource = THUMB_URLS[itemHash % THUMB_URLS.length];
9494
return (
95-
<TouchableHighlight
96-
onHideUnderlay={this.props.onHideUnderlay}
95+
<Pressable
9796
onPress={this._onPress}
98-
onShowUnderlay={this.props.onShowUnderlay}
97+
onPressIn={this.props.onShowUnderlay}
98+
onPressOut={this.props.onHideUnderlay}
9999
style={horizontal ? styles.horizItem : styles.item}
100-
tvParallaxProperties={{
101-
pressMagnification: 1.1
102-
}}
103100
>
104101
<View
105102
style={[
@@ -116,7 +113,7 @@ class ItemComponent extends React.PureComponent<{
116113
{item.title} - {item.text}
117114
</Text>
118115
</View>
119-
</TouchableHighlight>
116+
</Pressable>
120117
);
121118
}
122119
}
@@ -172,15 +169,11 @@ class Spindicator extends React.PureComponent<{}> {
172169
style={[
173170
styles.spindicator,
174171
{
175-
transform: [
176-
{
177-
rotate: this.props.value.interpolate({
178-
inputRange: [0, 5000],
179-
outputRange: ['0deg', '360deg'],
180-
extrapolate: 'extend'
181-
})
182-
}
183-
]
172+
rotate: this.props.value.interpolate({
173+
inputRange: [0, 5000],
174+
outputRange: ['0deg', '360deg'],
175+
extrapolate: 'extend'
176+
})
184177
}
185178
]}
186179
/>
@@ -263,9 +256,7 @@ class SingleColumnExample extends React.PureComponent {
263256
};
264257

265258
_onChangeScrollToIndex = (text) => {
266-
this._listRef
267-
.getNode()
268-
.scrollToIndex({ viewPosition: 0.5, index: Number(text) });
259+
this._listRef.scrollToIndex({ viewPosition: 0.5, index: Number(text) });
269260
};
270261

271262
_scrollPos = new Animated.Value(0);
@@ -283,7 +274,7 @@ class SingleColumnExample extends React.PureComponent {
283274
);
284275

285276
componentDidUpdate() {
286-
this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
277+
this._listRef.recordInteraction(); // e.g. flipping logViewable switch
287278
}
288279

289280
render() {
@@ -398,7 +389,7 @@ class SingleColumnExample extends React.PureComponent {
398389
}
399390
};
400391
_pressItem = (key: string) => {
401-
this._listRef.getNode().recordInteraction();
392+
this._listRef.recordInteraction();
402393
pressItem(this, key);
403394
};
404395
_listRef: AnimatedFlatList;
@@ -469,7 +460,7 @@ const styles = StyleSheet.create({
469460
smallSwitch: {
470461
top: 1,
471462
margin: -6,
472-
transform: [{ scale: 0.7 }]
463+
transform: 'scale(0.7)'
473464
},
474465
stacked: {
475466
alignItems: 'center',

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
import React from 'react';
1414
import {
15-
Button,
1615
Image,
1716
PixelRatio,
17+
Pressable,
1818
ScrollView,
1919
StyleSheet,
2020
Text,
@@ -41,7 +41,9 @@ function ListItem(props) {
4141
</View>
4242
</View>
4343
<View style={styles.column3}>
44-
<Button onPress={() => {}} style={styles.smallButton} title="Button" />
44+
<Pressable onPress={() => {}} style={styles.smallButton}>
45+
<Text>Button</Text>
46+
</Pressable>
4547
</View>
4648
</View>
4749
);
@@ -88,12 +90,13 @@ function withRTLState(Component) {
8890
const RTLToggler = ({ isRTL, setRTL }) => {
8991
const toggleRTL = () => setRTL(!isRTL);
9092
return (
91-
<Button
92-
accessibilityLabel="Change layout direction"
93+
<Pressable
94+
aria-label="Change layout direction"
9395
color="gray"
9496
onPress={toggleRTL}
95-
title={isRTL ? 'RTL' : 'LTR'}
96-
/>
97+
>
98+
<Text>{isRTL ? 'RTL' : 'LTR'}</Text>
99+
</Pressable>
97100
);
98101
};
99102

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useMemo } from 'react';
2-
import { Modal, View, Text, Button, StyleSheet } from 'react-native';
2+
import { Modal, View, Text, StyleSheet } from 'react-native';
3+
import Button from '../../shared/button';
34
import Example from '../../shared/example';
45

56
function Gap() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class LocationXY extends React.Component {
121121
};
122122

123123
render() {
124-
const transform = { transform: `translateX${this.state.translateX}` };
124+
const transform = { transform: `translateX(${this.state.translateX}px)` };
125125
return (
126126
<View style={styles.box}>
127127
<View style={styles.outer} {...this.panResponder.panHandlers}>

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import React from 'react';
2-
import {
3-
Button,
4-
ScrollView,
5-
StyleSheet,
6-
View,
7-
Text,
8-
Pressable
9-
} from 'react-native';
2+
import { ScrollView, StyleSheet, View, Text, Pressable } from 'react-native';
3+
import Button from '../../shared/button';
104
import Example from '../../shared/example';
115

126
export default function PressablePage() {
@@ -29,7 +23,6 @@ export default function PressablePage() {
2923
<Example title="Pressable">
3024
<View style={styles.container}>
3125
<Pressable
32-
accessibilityRole="button"
3326
delayLongPress="750"
3427
delayPressIn={delay}
3528
delayPressOut={delay}
@@ -45,6 +38,7 @@ export default function PressablePage() {
4538
onPress={handleEvent(`onPress - ${delay}ms delay`)}
4639
onPressIn={handleEvent(`onPressIn - ${delay}ms delay`)}
4740
onPressOut={handleEvent(`oPressOut - ${delay}ms delay`)}
41+
role="button"
4842
style={(state) => [
4943
styles.pressable,
5044
!disabled && state.focused && styles.focused,

0 commit comments

Comments
 (0)