Search code examples
androidiosanimationreact-nativegesture

Implement Swipe interaction on React Native


My goal is to build an interaction just like Harvest app has on mobile. It basically has 7 fixed Tabs and uses Swipe to navigate between the Tabs. While navigating between Tabs, I can see the content of next Tab while not completely navigating there. When reaching the edge of the Tabs and trying to keep Swiping the same direction, it loops after animating.

For example: if it starts at index: 5 and it gets a Swipe left interaction, it goes to index: 6; when trying again, it animates, loops and go back to index: 0.

I tried using 2 differents libs: react-native-swiper and react-native-swipe-gestures, but they don't match what I need. While react-native-swiper gives me the Animations, there's no way to get the Swipe right gesture when on index: 0. react-native-swipe-gesture, otherwise, gives me all control over the gestures, but doesn't Animate at all.

I tried using react-native-gesture-handler as part of Expo, but didn't manage to get the expected result. With that in mind, my guess is that it's easier to Animate the react-native-swipe-gesture, but I couldn't find anything about it. How can I get it done?


Solution

  • Used this fork from react-native-swipe-gestures: https://github.com/thegamenicorus/react-native-swipe-gestures