How to use openRight correctly on ReanimatedSwipeable

[novemberkilo]

Hello,

I'd like to know how to avoid getting this warning from openRight()

[Reanimated] Tried to modify key velocity of an object which has been already passed to a worklet. See
https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable
for more details.

As you can see from the code below, I am calling openRight() when the swipeable component is pressed. On first press I see this warning and there is no animation or opening but on subsequent presses (even though the warning continues) the component animates as expected to show the action buttons associated to renderRightActions

I've tried not wrapping things in Reanimated.View -- this seems to make no difference. I have checked to the best of my ability that swipeableRef is not being modified.

Any ideas on what's going on and how to fix this? Many thanks.

    <GestureHandlerRootView>
      <Swipeable
        ref={swipeableRef}
        containerStyle={[{ flex: 1 }, asHeader ? styles.header : styles.card]}
        leftThreshold={80}
        rightThreshold={80}
        renderRightActions={renderRightActions}
        renderLeftActions={
          status === "completed"
            ? () => null
            : () => <ActivityCard {...props} status="completed" />
        }
        onSwipeableWillOpen={() => {
          translateX.value = withTiming(0);
        }}
        onSwipeableWillClose={() => {
          translateX.value = withTiming(BUTTON_WIDTH * 2);
        }}
        onSwipeableOpen={handleSwipeableOpen}
      >
        <Reanimated.View>
          <TouchableOpacity
            onPress={() => {
              swipeableRef.current?.openRight();
            }}
          >
            <ActivityCard {...props} />
          </TouchableOpacity>
        </Reanimated.View>
      </Swipeable>
    </GestureHandlerRootView>

[latekvo]

Hi @novemberkilo

Which version of react-native-gesture-handler are you using?
I think this issue should be resolved by this PR, which is live since version 2.19.0

[ig-aellison]

I am seeing the same issue locally. react-native-gesture-handler v 2.20.0, reanimated 3.16.1, and the code snippet above is the same setup we have in our swipeable components, save that we use ReanimatedSwipeable. XCode/Simulator, iOS 18, iPhone 16 Pro.
EDIT for additional behavioural info that might be helpful to the team:

• Logging inside the callback passed to the onPress of the touchable shows that the provided onPress callback is always invoked when pressed. Logic successfully consistently enters the callback, no matter the successful/unsuccessful operation of openRight.
• Logging inside the callback shows (in our case, at least) that its ref is always appropriately defined / not undefined.
• Sometimes it takes 1-2 presses of the Touchable in question, before the ref's openRight is successfully invoked. It's not always "one and done", in terms of presses required for openRight to eventually be successful.
• This occurs for every swipeable component. Once openRight successfully invokes for one swipeable, it will be successfully invoked on every subsequent onPress of that touchable, from then onward, unless component is re-rendered. Given a list of swipeables, for exaple, every swipeable seems to need to go through this hiccup in order to then consistently openRight appropriately onPress

I hope this helps ^. We'll try to investigate further to help the team debug, but for now, it's replicable by other consumers of the package.