I coded a menu using PanGestureHandler and ScrollView.
The problem is; when PanGestureHandler is active, ScrollView's scroll is not working.
I mean swipe function is working but scrolling is not work.
My expectation is using these two feature together.
I shared my implementation code below.
Any idea?_
Constructor
constructor(props) {
super(props);
this.state = {
enable: true,
};
const dragX = new Value(0);
const dragY = new Value(0);
const state = new Value(-1);
const offsetY = new Value(0);
this.gestureHandler = event([
{
nativeEvent: {
translationX: dragX,
translationY: dragY,
offsetY,
state
}
}
]);
this.transitionX = block([
cond(
eq(state, State.ACTIVE),
[
interpolate(dragX, {
inputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
outputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
extrapolate: "clamp"
}),
],
[
cond(
eq(state, State.END),
[
call([], () => { this.setState({ enable: true }) }),
0,
],
cond(
eq(state, State.CANCELLED),
0,
dragX
)
)
]
)
]);
}
Render
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1 }} >
<ScrollView
ref={this.scrollRef}
waitFor={this.state.enable ? this.ref : this.scrollRef}
scrollEventThrottle={40}
onScrollEndDrag={() => { this.setState({ enable: true }) }}
onScrollBeginDrag={() => { this.setState({ enable: false }) }}
>
<PanGestureHandler
enabled={this.state.enable}
ref={this.ref}
onGestureEvent={this.gestureHandler}
onHandlerStateChange={this.gestureHandler}>
<Animated.View
style={{
transform: [
{
translateX: this.transitionX,
},
]
}} >
{
...
}
</Animated.View>
</PanGestureHandler>
</ScrollView>
</View>
);
}