| 
					
				 | 
			
			
				@@ -0,0 +1,81 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import React from 'react'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  Alert, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  Button, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  Platform, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  StyleSheet, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  Text, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  TouchableHighlight, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  TouchableNativeFeedback, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  TouchableOpacity, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  TouchableWithoutFeedback, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  View, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} from 'react-native'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const styles = StyleSheet.create({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  container: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    alignItems: 'center', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    paddingTop: 60, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  button: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    alignItems: 'center', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    backgroundColor: '#2196F3', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    marginBottom: 30, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 260, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  buttonText: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: 'white', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: 20, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+class Touchables extends React.Component { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  onPressButton() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    Alert.alert('You pressed THE button'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  onLongPressButton() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    Alert.alert('You long-pressed the button'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  render() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    return ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <View style={styles.container}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <TouchableHighlight onPress={this.onPressButton} underlayColor="white"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <View style={styles.button}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <Text style={styles.buttonText}>TouchableHighlight</Text> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </TouchableHighlight> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <TouchableOpacity onPress={this.onPressButton}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <View style={styles.button}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <Text style={styles.buttonText}>TouchableOpacity</Text> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </TouchableOpacity> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <TouchableNativeFeedback onPress={this.onPressButton} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <View style={styles.button}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <Text style={styles.buttonText}>TouchableNativeFeedback</Text> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </TouchableNativeFeedback> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <TouchableWithoutFeedback onPress={this.onPressButton}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <View style={styles.button}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </TouchableWithoutFeedback> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <TouchableHighlight onPress={this.onPressButton} onLongPress={this.onLongPressButton} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          underlayColor="white"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <View style={styles.button}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <Text style={styles.buttonText}>Touchable with Long Press</Text> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </TouchableHighlight> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </View> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+export default Touchables; 
			 |