Animated.View and useRef are inexplicably being shared between child components

Question

I am rendering a list of items like so:

{formattedJournal[meal].map((food, idx, arr) => {
                const isLast = idx === arr.length - 1;
                return (
                  <View key={idx}>
                    <JournalItem
                      isLast={isLast}
                      idx={idx}
                      food={food}
                    />
                  </View>
                );
              })}

// JournalItem.js
  
const translateX = useRef(new Animated.Value(0)).current || 0;
  handleDelete = (food) => {
    Animated.timing(translateX, {
      toValue: -width,
      duration: 350,
      useNativeDriver: false,
    }).start(() => null);
  };

return (<Swipeable
        renderRightActions={renderRightActions}
        overshootRight={false}
        onSwipeableOpen={() => handleDelete(food)}
        rightThreshold={75}
        containerStyle={[
          {
            transform: [{ translateX }],
          },
        ]}
      > ... )

What I want to accomplish is simple, I want to delete an item when the user swipes it. Instead, what happens is, the last item in the list receives the animation, no matter which element you triggered the swipe on, which makes no sense, because each useRef call is scoped to its own instance of JournalItem, so I have no idea why it's only using the last reference when swiping.

Answer 1

Insidious. It was because I wasn't scoping the handleDelete function with const. Don't be lazy and omit const!