Add andoird

index.android.js

@@ -9,45 +9,107 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  PanResponder,
+  TouchableOpacity,
+  Dimensions
 } from 'react-native';
 
+const { width, height } = Dimensions.get('window');
+
+const getDirectionAndColor = ({ moveX, moveY, dx, dy}) => {
+  const draggedDown = dy > 30;
+  const draggedUp = dy < -30;
+  const draggedLeft = dx < -30;
+  const draggedRight = dx > 30;
+  const isRed = moveY < 90 && moveY > 40 && moveX > 0 && moveX < width;
+  const isBlue = moveY > (height - 50) && moveX > 0 && moveX < width;
+  let dragDirection = '';
+
+  if (draggedDown || draggedUp) {
+    if (draggedDown) dragDirection += 'dragged down '
+    if (draggedUp) dragDirection +=  'dragged up ';
+  }
+
+  if (draggedLeft || draggedRight) {
+    if (draggedLeft) dragDirection += 'dragged left '
+    if (draggedRight) dragDirection +=  'dragged right ';
+  }
+
+  if (isRed) return `red ${dragDirection}`
+  if (isBlue) return `blue ${dragDirection}`
+  if (dragDirection) return dragDirection;
+}
+
 class panreject extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      zone: "Still Touchable"
+    }
+
+    this.onPress = this.onPress.bind(this);
+  }
+  componentWillMount() {
+    this._panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder:(evt, gestureState) => !!getDirectionAndColor(gestureState),
+      onPanResponderMove: (evt, gestureState) => {
+        const drag = getDirectionAndColor(gestureState);
+        this.setState({
+          zone: drag,
+        })
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) => true,
+    });
+  }
+
+  onPress() {
+    this.setState({
+      zone: "I got touched with a parent pan responder"
+    })
+  }
+
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
+      <View style={styles.container} {...this._panResponder.panHandlers}>
+        <View style={styles.zone1} />
+        <View style={styles.center}>
+          <TouchableOpacity onPress={this.onPress}>
+            <Text>{this.state.zone}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.zone2} />
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    flex: 1
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center" 
   },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+  zone1: {
+    top: 40,
+    left: 0,
+    right: 0,
+    height: 50,
+    position: 'absolute',
+    backgroundColor: "red"
   },
+  zone2: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 50,
+    position: 'absolute',
+    backgroundColor: "blue"
+  }
 });
 
 AppRegistry.registerComponent('panreject', () => panreject);