Experiment with passing the pan gesture ref down through context

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 {

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;

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": [

src/index.js

@@ -52,4 +52,7 @@ module.exports = {
   get ScenesReducer() {
     return require('./views/ScenesReducer').default;
   },
+  get GestureContext() {
+    return require('./utils/GestureContext').default;
+  }
 };

src/utils/GestureContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const GestureContext = React.createContext(null);
+export default GestureContext;

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>
     );