Use react-native-gesture-handler's PanGestureHandler instead of PanResponder

packages/stack/example/src/GestureInteraction.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Button,
+  InteractionManager,
+  WebView,
+  View,
+  StyleSheet,
+} from 'react-native';
+import { MapView } from 'expo';
+import { createStackNavigator, withNavigationFocus } from 'react-navigation';
+import { StackGestureContext } from 'react-navigation-stack';
+import {
+  PanGestureHandler,
+  NativeViewGestureHandler,
+} from 'react-native-gesture-handler';
+
+const IndexScreen = ({ navigation }) => (
+  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <Button title="Go to MapView" onPress={() => navigation.navigate('Map')} />
+    <Button title="Go to WebView" onPress={() => navigation.navigate('Web')} />
+    <Button
+      title="Return to other examples"
+      onPress={() => navigation.navigate('Home')}
+    />
+  </View>
+);
+
+IndexScreen.navigationOptions = {
+  title: 'Gesture Interactions',
+};
+
+class MapScreen extends React.Component {
+  constructor(props) {
+    super(props);
+    InteractionManager.runAfterInteractions(() => {
+      this.setState({ interactionComplete: true });
+    });
+
+    this.state = {
+      interactionComplete: false,
+    };
+  }
+
+  render() {
+    if (!this.state.interactionComplete) {
+      return (
+        <View
+          style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
+    return (
+      <StackGestureContext.Consumer>
+        {ref => (
+          <NativeViewGestureHandler waitFor={ref}>
+            <MapView style={{ flex: 1 }} />
+          </NativeViewGestureHandler>
+        )}
+      </StackGestureContext.Consumer>
+    );
+  }
+}
+
+MapScreen.navigationOptions = {
+  title: 'MapView',
+};
+
+const WebViewScreen = () => (
+  <StackGestureContext.Consumer>
+    {ref => (
+      <NativeViewGestureHandler waitFor={ref}>
+        <WebView
+          style={{ flex: 1 }}
+          source={{ uri: 'https://news.google.com' }}
+        />
+      </NativeViewGestureHandler>
+    )}
+  </StackGestureContext.Consumer>
+);
+
+WebViewScreen.navigationOptions = {
+  title: 'WebView',
+};
+
+export default createStackNavigator({
+  Index: IndexScreen,
+  Map: MapScreen,
+  Web: WebViewScreen,
+});

packages/stack/example/src/ImageStack.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Dimensions, Button, Image, View, Text } from 'react-native';
+import { createStackNavigator } from 'react-navigation-stack';
+import { FlatList, BorderlessButton } from 'react-native-gesture-handler';
+
+class ListScreen extends React.Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: 'Image list',
+    headerBackTitle: 'Back',
+    headerLeft: (
+      <Button title="Back" onPress={() => navigation.navigate('Home')} />
+    ),
+  });
+
+  state = {
+    items: Array.apply(null, Array(60)).map((v, i) => {
+      return {
+        id: i,
+        src: `https://source.unsplash.com/random/400x${400 + i}`,
+      };
+    }),
+  };
+
+  render() {
+    return (
+      <FlatList
+        data={this.state.items}
+        renderItem={({ item }) => (
+          <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
+            <BorderlessButton
+              onPress={() =>
+                this.props.navigation.navigate('Details', {
+                  id: item.id,
+                  src: item.src,
+                })
+              }
+            >
+              <Image style={{ height: 100 }} source={{ uri: item.src }} />
+            </BorderlessButton>
+          </View>
+        )}
+        numColumns={3}
+        keyExtractor={(item, index) => index}
+        style={{ flex: 1, backgroundColor: '#fff' }}
+      />
+    );
+  }
+}
+
+class DetailsScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Random image from Unsplash',
+  };
+
+  render() {
+    let id = this.props.navigation.getParam('id', 0);
+
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: '#fff',
+        }}
+      >
+        <Image
+          source={{
+            uri: `https://source.unsplash.com/random/1080x${1920 + id}`,
+          }}
+          style={{ width: Dimensions.get('window').width, height: 400 }}
+          resizeMode="cover"
+        />
+        <Button
+          title="Go back"
+          onPress={() => this.props.navigation.goBack()}
+        />
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    Details: DetailsScreen,
+  },
+  {
+    initialRouteName: 'List',
+  }
+);

packages/stack/example/src/LifecycleInteraction.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ActivityIndicator, Button, Text, View, StyleSheet } from 'react-native';
+import { BarCodeScanner } from 'expo';
+import { createStackNavigator, withNavigationFocus } from 'react-navigation';
+
+const IndexScreen = ({ navigation }) => (
+  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <Button
+      title="Go to BarCodeScanner"
+      onPress={() => navigation.navigate('BarCode')}
+    />
+    <Button
+      title="Return to other examples"
+      onPress={() => navigation.navigate('Home')}
+    />
+  </View>
+);
+
+IndexScreen.navigationOptions = {
+  title: 'Lifecycle Interactions',
+};
+
+@withNavigationFocus
+class BarCodeScreen extends React.Component {
+  handleBarCodeScanned = data => {
+    console.log('scanned...');
+    this.props.navigation.navigate('Info', { data });
+  };
+
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <BarCodeScanner
+          onBarCodeScanned={this.props.isFocused ? this.handleBarCodeScanned : null}
+          style={StyleSheet.absoluteFill}
+        />
+      </View>
+    );
+  }
+}
+
+BarCodeScreen.navigationOptions = {
+  title: 'BarCodeView',
+};
+
+class InfoScreen extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <Text>{JSON.stringify(this.props.navigation.getParam('data'))}</Text>
+      </View>
+    );
+  }
+}
+
+InfoScreen.navigationOptions = {
+  title: 'Info',
+};
+
+export default createStackNavigator(
+  {
+    Index: IndexScreen,
+    BarCode: BarCodeScreen,
+    Info: InfoScreen,
+  },
+  {
+    initialRouteName: 'Index',
+  }
+);

packages/stack/example/src/ModalStack.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button, View, Text } from 'react-native';
+import { createStackNavigator } from 'react-navigation-stack';
+
+class ListScreen extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>List Screen</Text>
+        <Text>A list may go here</Text>
+        <Button
+          title="Go to Details"
+          onPress={() => this.props.navigation.navigate('Details')}
+        />
+        <Button
+          title="Go back to all examples"
+          onPress={() => this.props.navigation.navigate('Home')}
+        />
+      </View>
+    );
+  }
+}
+
+class DetailsScreen extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Details Screen</Text>
+        <Button
+          title="Go to Details... again"
+          onPress={() => this.props.navigation.push('Details')}
+        />
+        <Button
+          title="Go to List"
+          onPress={() => this.props.navigation.navigate('List')}
+        />
+        <Button
+          title="Go back"
+          onPress={() => this.props.navigation.goBack()}
+        />
+        <Button
+          title="Go back to all examples"
+          onPress={() => this.props.navigation.navigate('Home')}
+        />
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    Details: DetailsScreen,
+  },
+  {
+    initialRouteName: 'List',
+    mode: 'modal',
+  }
+);

packages/stack/example/src/SimpleStack.js

@@ -5,7 +5,14 @@ import { createStackNavigator } from 'react-navigation-stack';
 class ListScreen extends React.Component {
   render() {
     return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
         <Text>List Screen</Text>
         <Text>A list may go here</Text>
         <Button
@@ -24,7 +31,14 @@ class ListScreen extends React.Component {
 class DetailsScreen extends React.Component {
   render() {
     return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
         <Text>Details Screen</Text>
         <Button
           title="Go to Details... again"