On IOS devices, swipe back gesture couldn't work properly

[NikiLee2016]

trafficstars

On IOS devices, swipe back gesture couldn't work properly when I do it on the react-native-scrollable-tab-view area, and I know a horizontal ScrollView is the container widget of react-native-scrollable-tab-view, so this bug is exactly about horizontal ScrollView. So I want to find a solution to solve this gesture conflict, with PanResponder Or react-native-gesture-handler? Any can help me?

[congshengwu]

@NikiLee2016 Hi, I have a solution maybe you can have a look, and it works well on my side. Basically, using PanResponder to intercept touch event, if user touches the "swipe back area", set the props of scrollEnabled as false, then it will trigger "swiper back" instead of scrolling the page. And if user touches non "swiper back area", set the props of scrollEnabled as true, to let the react-native-scrollable-tab-view scrollable.

Below is the code:

export default class MyPage extends Component {
    constructor(props) {
        super(props);
        ......
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponderCapture: (e) => {
                if (Platform.OS !== 'ios') {
                    return false;
                }
                const iosSwiperBackAreaSize = 50;
                if (e.nativeEvent.pageX <= iosSwiperBackAreaSize) {
                    this.refTabView && this.refTabView.setScrollEnabled(false);
                } else {
                    this.refTabView && this.refTabView.setScrollEnabled(true);
                }
                return false;
            }
        });
        ......
    }

    render() {
        <View style={{ flex: 1 }} {...this._panResponder}>
            ......
            <ScrollableTabView
                        ref={view => this.refTabView = view}
                        ......
                    >
                        {......}
            </ScrollableTabView>
            ......
        </View>
    }

}

Also need to modify the source code of react-native-scrollable-tab-view, which is trying to give the ability of enable/disable the scroll, and the modified source code is from /node_modules/react-native-scrollable-tab-view/index.js. After you do this, you need to make sure the modified index.js file will cover /node_modules/react-native-scrollable-tab-view/index.js to let the modified code working before running your app. Below is the modified source code:

......
const ScrollableTabView = createReactClass({
    ......
    /* By using below method, it will change the scrollable behavior immediately, which is faster response than the setState() method. It is important to react the touch event immediately. */
    setScrollEnabled(b: boolean) {
        this.scrollView.setNativeProps({ scrollEnabled: b });
    },
    ......
});
......

If you get any new idea, welcom to reply me.

[NikiLee2016]

@congshengwu Hello, using PanResponder and setNativeProps is definitely a good idea, and My solution is like this: return ( <View style={[styles.container, style]} onLayout={this._handleLayout}> {tabBarPosition === 'top' && this.renderTabBar(tabBarProps)} {this.renderScrollableContent()} {(tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)} <View style={{ position: 'absolute', height: '100%', width: 10, left: 0, top: 44, }} /> </View> );

[GodVampire]

add empty View is a nice idea.

Below I provide a changeFile, if you have one(changeFile.sh)

sed -i '' '399a\
        {Platform.OS === "ios" && <View style={{position: "absolute",height: "100%",width: 10,left: 0,top: 44}}/>}
    ' "node_modules/react-native-scrollable-tab-view/index.js"