Why does ReanimatedSwipeable renderRightAction allow multiple parameters instead of a props object?

[EddyVinck]

I was reviewing some code from someone and I just noticed that RightAction doesn't expect a single props object like you would see with most React components.

From the example in the react-native-reanimated docs:

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('showRightProgress:', prog.value);
    console.log('appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value + 50 }],
    };
  });

  return (
    <Reanimated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Text</Text>
    </Reanimated.View>
  );
}

export default function Example() {
  return (
    <GestureHandlerRootView>
      <ReanimatedSwipeable
        renderRightActions={RightAction}>
        <Text>Swipe me!</Text>
      </ReanimatedSwipeable>
    </GestureHandlerRootView>
  );
}

Why is it not a single props object that is passed to RightAction like so:

type Props = { prog: SharedValue<number>, drag: SharedValue<number> };

function RightAction({ prog, drag }: Props) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('showRightProgress:', prog.value);
    console.log('appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value + 50 }],
    };
  });

  return (
    <Reanimated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Text</Text>
    </Reanimated.View>
  );
}

In the React docs they mention not to call component functions directly, but I noticed that this is done in the ReanimatedSwipeable source code:

const rightElement = useCallback(
  () => (
    <Animated.View style={[styles.rightActions, rightActionAnimation]}>
      {renderRightActions?.(
        showRightProgress,
        appliedTranslation,
        swipeableMethods
      )}
      <Animated.View ref={rightLayoutRef} />
    </Animated.View>
  ),
  [
    appliedTranslation,
    renderRightActions,
    rightActionAnimation,
    rightLayoutRef,
    showRightProgress,
    swipeableMethods,
  ]
);

So I was curious. Is there a benefit to this approach, or a technicality when integrating with React that makes it necessary?

[latekvo]

Hey, I originally took this decision to maintain high backwards-compatibility with the Swipeable.
I admit this might've been a poor decision, and I tried a couple of approaches to transition from the multi-prop to a single-prop function signature since. Unfortunately, while the JS logic for this kind of a transition is fairly simple, type issues prevent us from applying any of these changes.

type RenderActionType = {
  (props: {
    progress: SharedValue<number>;
    translation: SharedValue<number>;
    swipeableMethods: SwipeableMethods;
  }): React.ReactNode;
  (
    progress: SharedValue<number>,
    translation: SharedValue<number>,
    swipeableMethods: SharedValue<number>
  ): React.ReactNode;
}

and

type RenderActionType =
  | ((props: {
      progress: SharedValue<number>;
      translation: SharedValue<number>;
      swipeableMethods: SwipeableMethods;
    }) => React.ReactNode)
  | ((
      progress: SharedValue<number>,
      translation: SharedValue<number>,
      swipeableMethods: SwipeableMethods
    ) => React.ReactNode);

Of course, I'm open to your suggestions. If you find a working solution, feel free to either open a PR, or let me know what you did to get this issue solved, I'll apply the changes straight away. Other than that, I'll bring this issue up with the team, but as of now, there are no plans to introduce a breaking-change to the ReanimatedSwipeable API. While the multi-prop notation is not standard, it doesn't seem like it causes any issues, as the renderer function is manually called either way.

[EddyVinck]

Fair enough, I was mostly just curious about why this was done. Thanks for letting me know!