From 5eac729fc39990a94998f815d4b3ba7a86eb5dca Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Mon, 24 Sep 2018 17:53:22 -0700
Subject: [PATCH] Experiment with passing the pan gesture ref down through
 context

---
 example/App.js                         |  2 +
 example/src/GestureInteraction.js      | 58 ++++++++++++++++++++++++++
 package.json                           |  2 +-
 src/index.js                           |  3 ++
 src/utils/GestureContext.js            |  4 ++
 src/views/StackView/StackViewLayout.js | 13 ++++--
 6 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 example/src/GestureInteraction.js
 create mode 100644 src/utils/GestureContext.js

diff --git a/example/App.js b/example/App.js
index da50c7a..400bad2 100644
--- a/example/App.js
+++ b/example/App.js
@@ -8,6 +8,7 @@ import { ListSection, Divider } from 'react-native-paper';
 import SimpleStack from './src/SimpleStack';
 import TransparentStack from './src/TransparentStack';
 import ModalStack from './src/ModalStack';
+import GestureInteraction from './src/GestureInteraction';
 
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
@@ -21,6 +22,7 @@ const data = [
     title: 'Transparent',
     routeName: 'TransparentStack',
   },
+  { component: GestureInteraction, title: 'Gesture Interaction', routeName: 'GestureInteraction' },
 ];
 
 class Home extends React.Component {
diff --git a/example/src/GestureInteraction.js b/example/src/GestureInteraction.js
new file mode 100644
index 0000000..f605bb4
--- /dev/null
+++ b/example/src/GestureInteraction.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button, WebView, View, StyleSheet } from 'react-native';
+import { MapView } from 'expo';
+import { createStackNavigator } from 'react-navigation';
+import { GestureContext } 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')} />
+  </View>
+);
+
+class MapScreen extends React.Component {
+  render() {
+    return (
+      <GestureContext.Consumer>
+        {ref => (
+          <NativeViewGestureHandler waitFor={ref}>
+            <MapView style={{ flex: 1 }} />
+          </NativeViewGestureHandler>
+        )}
+      </GestureContext.Consumer>
+    );
+  }
+}
+
+MapScreen.navigationOptions = {
+  title: 'MapView',
+};
+const WebViewScreen = () => (
+  <NativeViewGestureHandler>
+    <WebView style={{ flex: 1 }} source={{ uri: 'https://news.google.com' }} />
+  </NativeViewGestureHandler>
+);
+
+WebViewScreen.navigationOptions = {
+  title: 'WebView',
+};
+
+const DrawerExample = createStackNavigator(
+  {
+    Index: IndexScreen,
+    Map: MapScreen,
+    Web: WebViewScreen,
+  },
+  {
+    contentOptions: {
+      activeTintColor: '#e91e63',
+    },
+  }
+);
+
+export default DrawerExample;
diff --git a/package.json b/package.json
index 4a2e7b5..1711c2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-stack",
-  "version": "0.6.0",
+  "version": "1.0.0-alpha.0",
   "description": "Stack navigator component for React Navigation",
   "main": "dist/index.js",
   "files": [
diff --git a/src/index.js b/src/index.js
index f547311..9ae7d46 100644
--- a/src/index.js
+++ b/src/index.js
@@ -52,4 +52,7 @@ module.exports = {
   get ScenesReducer() {
     return require('./views/ScenesReducer').default;
   },
+  get GestureContext() {
+    return require('./utils/GestureContext').default;
+  }
 };
diff --git a/src/utils/GestureContext.js b/src/utils/GestureContext.js
new file mode 100644
index 0000000..69a6eed
--- /dev/null
+++ b/src/utils/GestureContext.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+const GestureContext = React.createContext(null);
+export default GestureContext;
\ No newline at end of file
diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js
index d69b734..feba0bb 100644
--- a/src/views/StackView/StackViewLayout.js
+++ b/src/views/StackView/StackViewLayout.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import clamp from '../../utils/clamp';
+import GestureContext from '../../utils/GestureContext';
 import {
   Animated,
   StyleSheet,
@@ -120,6 +121,7 @@ class StackViewLayout extends React.Component {
 
   constructor(props) {
     super(props);
+    this.panGestureRef = React.createRef();
 
     this.state = {
       // Used when card's header is null and mode is float to make transition
@@ -295,15 +297,18 @@ class StackViewLayout extends React.Component {
     return (
       <PanGestureHandler
         {...this._gestureActivationCriteria()}
+        ref={this.panGestureRef}
         onGestureEvent={this._handlePanGestureEvent}
         onHandlerStateChange={this._handlePanGestureStateChange}
         enabled={index > 0 && gesturesEnabled}
       >
         <View style={containerStyle}>
-          <ScreenContainer style={styles.scenes}>
-            {scenes.map(s => this._renderCard(s))}
-          </ScreenContainer>
-          {floatingHeader}
+          <GestureContext.Provider value={this.panGestureRef}>
+            <ScreenContainer style={styles.scenes}>
+              {scenes.map(s => this._renderCard(s))}
+            </ScreenContainer>
+            {floatingHeader}
+          </GestureContext.Provider>
         </View>
       </PanGestureHandler>
     );