Odtnhj

I have a webview inside one of the screens of tab navigator. There are elements inside the webview which the user could swipe horizontally to show more information. The problem I have is that whenever the user tries to swipe horizontally inside the webview, the tab navigator detects the swipe instead and this results in the tab changing. This only happens on Android devices but not iOS devices.

To solve this issue, I am trying to set PanResponder inside the webview but it's not working. The related methods are not even called because the console logs are not printed when I am dragging my finger across the webview. Below is my code for the webview:

import React, Component from 'react';
import WebView, View, PanResponder from 'react-native';

class CustomWebPage extends Component 
 componentWillMount() 
 this.gesture = PanResponder.create(
 onPanResponderTerminationRequest: () => false,
 onStartShouldSetPanResponder: (evt, gestureState) => true,
 onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
 onMoveShouldSetPanResponder: (evt, gestureState) => true,
 onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
 onPanResponderGrant: (evt, gestureState) => 
 console.log('onPanResponderGrant');
 ,
 onPanResponderMove: (evt, gestureState) => 
 console.log('onPanResponderMove: ', evt, ', ', gestureState);
 ,
 onPanResponderTerminate: (evt, gestureState) => 
 console.log('onPanResponderTerminate: ', evt, ', ', gestureState);
 ,
 onPanResponderRelease: (evt, gestureState) => 
 console.log('onPanResponderRelease: ', evt, ', ', gestureState);
 ,
 );
 

 render() 
 return (
 <WebView
 source= uri: 'https://www.google.com.sg/' 
 style= flex: 1 
 ...this.gesture.panHandlers
 />
 );
 


export default CustomWebPage;

Replace componentWillMount() with constructor()

so here,

constructor(props) {
 super(props) 
// Here your PanResponder related codes