Skip to content

Commit 6f8b69e

Browse files
xoyseauxoyseau
authored
refactor handling touches examples to function components (facebook#4230)
1 parent 83425a8 commit 6f8b69e

File tree

1 file changed

+71
-75
lines changed

1 file changed

+71
-75
lines changed

‎docs/handling-touches.md‎

Lines changed: 71 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -25,35 +25,29 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
2525
Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
2626

2727
```SnackPlayer name=Button%20Basics
28-
import React, {Component} from 'react';
28+
import React from 'react';
2929
import {Alert, Button, StyleSheet, View} from 'react-native';
3030
31-
export default class ButtonBasics extends Component {
32-
_onPressButton() {
31+
const ButtonBasics = () => {
32+
const onPress = () => {
3333
Alert.alert('You tapped the button!');
34-
}
34+
};
3535
36-
render() {
37-
return (
38-
<View style={styles.container}>
39-
<View style={styles.buttonContainer}>
40-
<Button onPress={this._onPressButton} title="Press Me" />
41-
</View>
42-
<View style={styles.buttonContainer}>
43-
<Button
44-
onPress={this._onPressButton}
45-
title="Press Me"
46-
color="#841584"
47-
/>
48-
</View>
49-
<View style={styles.alternativeLayoutButtonContainer}>
50-
<Button onPress={this._onPressButton} title="This looks great!" />
51-
<Button onPress={this._onPressButton} title="OK!" color="#841584" />
52-
</View>
36+
return (
37+
<View style={styles.container}>
38+
<View style={styles.buttonContainer}>
39+
<Button onPress={onPress} title="Press Me" />
40+
</View>
41+
<View style={styles.buttonContainer}>
42+
<Button onPress={onPress} title="Press Me" color="#841584" />
5343
</View>
54-
);
55-
}
56-
}
44+
<View style={styles.alternativeLayoutButtonContainer}>
45+
<Button onPress={onPress} title="This looks great!" />
46+
<Button onPress={onPress} title="OK!" color="#841584" />
47+
</View>
48+
</View>
49+
);
50+
};
5751
5852
const styles = StyleSheet.create({
5953
container: {
@@ -69,6 +63,8 @@ const styles = StyleSheet.create({
6963
justifyContent: 'space-between',
7064
},
7165
});
66+
67+
export default ButtonBasics;
7268
```
7369

7470
## Touchables
@@ -90,7 +86,7 @@ In some cases, you may want to detect when a user presses and holds a view for a
9086
Let's see all of these in action:
9187

9288
```SnackPlayer name=Touchables
93-
import React, {Component} from 'react';
89+
import React from 'react';
9490
import {
9591
Alert,
9692
Platform,
@@ -103,59 +99,57 @@ import {
10399
View,
104100
} from 'react-native';
105101
106-
export default class Touchables extends Component {
107-
_onPressButton() {
102+
const Touchables = () => {
103+
const onPressButton = () => {
108104
Alert.alert('You tapped the button!');
109-
}
105+
};
110106
111-
_onLongPressButton() {
107+
const onLongPressButton = () => {
112108
Alert.alert('You long-pressed the button!');
113-
}
114-
115-
render() {
116-
return (
117-
<View style={styles.container}>
118-
<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
119-
<View style={styles.button}>
120-
<Text style={styles.buttonText}>TouchableHighlight</Text>
121-
</View>
122-
</TouchableHighlight>
123-
<TouchableOpacity onPress={this._onPressButton}>
124-
<View style={styles.button}>
125-
<Text style={styles.buttonText}>TouchableOpacity</Text>
126-
</View>
127-
</TouchableOpacity>
128-
<TouchableNativeFeedback
129-
onPress={this._onPressButton}
130-
background={
131-
Platform.OS === 'android'
132-
? TouchableNativeFeedback.SelectableBackground()
133-
: undefined
134-
}>
135-
<View style={styles.button}>
136-
<Text style={styles.buttonText}>
137-
TouchableNativeFeedback{' '}
138-
{Platform.OS !== 'android' ? '(Android only)' : ''}
139-
</Text>
140-
</View>
141-
</TouchableNativeFeedback>
142-
<TouchableWithoutFeedback onPress={this._onPressButton}>
143-
<View style={styles.button}>
144-
<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
145-
</View>
146-
</TouchableWithoutFeedback>
147-
<TouchableHighlight
148-
onPress={this._onPressButton}
149-
onLongPress={this._onLongPressButton}
150-
underlayColor="white">
151-
<View style={styles.button}>
152-
<Text style={styles.buttonText}>Touchable with Long Press</Text>
153-
</View>
154-
</TouchableHighlight>
155-
</View>
156-
);
157-
}
158-
}
109+
};
110+
111+
return (
112+
<View style={styles.container}>
113+
<TouchableHighlight onPress={onPressButton} underlayColor="white">
114+
<View style={styles.button}>
115+
<Text style={styles.buttonText}>TouchableHighlight</Text>
116+
</View>
117+
</TouchableHighlight>
118+
<TouchableOpacity onPress={onPressButton}>
119+
<View style={styles.button}>
120+
<Text style={styles.buttonText}>TouchableOpacity</Text>
121+
</View>
122+
</TouchableOpacity>
123+
<TouchableNativeFeedback
124+
onPress={onPressButton}
125+
background={
126+
Platform.OS === 'android'
127+
? TouchableNativeFeedback.SelectableBackground()
128+
: undefined
129+
}>
130+
<View style={styles.button}>
131+
<Text style={styles.buttonText}>
132+
TouchableNativeFeedback{' '}
133+
{Platform.OS !== 'android' ? '(Android only)' : ''}
134+
</Text>
135+
</View>
136+
</TouchableNativeFeedback>
137+
<TouchableWithoutFeedback onPress={onPressButton}>
138+
<View style={styles.button}>
139+
<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
140+
</View>
141+
</TouchableWithoutFeedback>
142+
<TouchableHighlight
143+
onPress={onPressButton}
144+
onLongPress={onLongPressButton}
145+
underlayColor="white">
146+
<View style={styles.button}>
147+
<Text style={styles.buttonText}>Touchable with Long Press</Text>
148+
</View>
149+
</TouchableHighlight>
150+
</View>
151+
);
152+
};
159153
160154
const styles = StyleSheet.create({
161155
container: {
@@ -174,6 +168,8 @@ const styles = StyleSheet.create({
174168
color: 'white',
175169
},
176170
});
171+
172+
export default Touchables;
177173
```
178174

179175
## Scrolling and swiping

0 commit comments

Comments
 (0)