Possible to support for swipe up/down?

[niravj-spaceo]

Will it be possible to support for swiping up/down?

[JungHsuan]

Yes, it's possible, but it would have conflicts if your content is scrollable.

[niravj-spaceo]

@JungHsuan
So, what I have currently is a app in landscap mode and have side scrolling content.
I have implemented up/down direction with react-native-card-flip package. It works but not looks good like what your have in this pacakge.
I would like to implement the same with this package. Any tweaks that you can make or suggest to support this?

[JungHsuan]

Sorry, there might be no simple tweaks.

1. You should also listen to the event of dy in onPanResponderMove

return Animated.event([{ dx: this.state.scrollX, dy: this.state.scrollY }],
    { useNativeDriver: false })(gestureState);

2. To rotate component by scrollY, adding rotateX in your transform props of Animated.View:

rotateX: scrollY.interpolate({
    extrapolate: 'clamp',
    inputRange: [-height, 0, height],
    outputRange: Platform.select({
        ios: ['-180deg', '0deg', '180deg'],
        android: ['180deg', '0deg', '-180deg'],
    }),
}),

3. Since we would also set the face of card by scrollY, so we should add a listener for scrollY, too.

this.state.scrollX.addListener(({ value }) => {
 // here we do the same thing as we do for scrollX, but the you should 
 // use height instead of width to check the boundary
 // e.g.
 // const endRight = start + this.state.width;  -> should use height 
 // const endLeft = start - this.state.width;     -> should use height
}

4. Maybe you don't want to rotate the card on both X and Y direction at the same time, because it would be skewed. Therefore, checking dx and dy of current gesture in onMoveShouldSetPanResponder should help you decide which direction to rotate.