Search code examples
react-nativereact-native-reanimatedreact-native-gesture-handler

Animating Swipeable Component: React Native Gesture Handler


I want to add animations to my Swipeable component in order to make it clear to the user that it can be swiped. However, I don't want the animation to fully open the action items. I only want it to open partially and then return to the starting position. Is there a way to achieve this? Can I control the swipe programmatically, so that I can animate it with Reanimated?

The closest thing I could find in the docs is the openLeft and openRight methods, but again, I don't want to swipe my component the entire way.


Solution

  • Ended up using this workaround:

    <Swipeable
      renderRightActions={() => (
      <View style={{width: '100%', height: '100%'}} />
      )}>
      {children}
    </Swipeable>
    

    to make the Swipeable work, and then inserting an absolutely-positioned background below it. This way, I could wrap the Swipeable with an Animated.View and the background will stay stationary as it is being animated. Of course, there might be an ideal solution I'm missing.