ReanimatedSwipeable is swipeable even if renderRightActions prop is undefined, unlike legacy Swipeable

olivertylsar commented 1 month ago

Description

Docs say ReanimatedSwipeable is a drop-in replacement for Swipeable, which indicates that it should behave the same way as the legacy one. It is not the case in terms of behavior towards renderRightActions property.

Steps to reproduce

In example app in swipeableReanimation/index.tsx, pass renderRightActions={undefined} for both ReanimatedSwipeable and Swipeable components.

export default function Example() {
  return (
    <GestureHandlerRootView>
      <View style={styles.separator} />

      <ReanimatedSwipeable
        containerStyle={styles.swipeable}
        friction={2}
        leftThreshold={80}
        enableTrackpadTwoFingerGesture
        rightThreshold={40}
        renderLeftActions={LeftAction}
        renderRightActions={undefined}>
        <Text>[Reanimated] Swipe me!</Text>
      </ReanimatedSwipeable>

      <View style={styles.separator} />

      <Swipeable
        containerStyle={styles.swipeable}
        friction={2}
        leftThreshold={80}
        enableTrackpadTwoFingerGesture
        rightThreshold={40}
        renderLeftActions={LegacyLeftAction}
        renderRightActions={undefined}>
        <Text>[Legacy] Swipe me!</Text>
      </Swipeable>

      <View style={styles.separator} />
    </GestureHandlerRootView>
  );
}

In case of ReanimatedSwipeable, the row is still swipeable even when there is no content provided and the the row content goes beyond the left edge of the screen and becomes invisible. The legacy one is no longer swipeable when the are no actions provided, which is the correct behavior in my opinion. If it's not a bug and this behavior is desired, it should have been noted in the docs.

Possible workaround is rendering the ReanimatedSwipeable component conditionally.

https://github.com/user-attachments/assets/da1231ad-1e9e-40ac-90ea-f875ae92f90e

Snack or a link to a repository

https://snack.expo.io/

Gesture Handler version

2.20.0

React Native version

0.74.3

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

Samsung S21

Acknowledgements

Yes

github-actions[bot] commented 1 month ago

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

latekvo commented 1 month ago

Hi @olivertylsar

this should be fixed by the next version of React Native Gesture Handler, a PR fixing this issue has been already merged.

Please let me know if you're still encountering this issue on the main branch.

software-mansion / react-native-gesture-handler