ReanimatedSwipeable component causing constant "reading 'value' warning message"

Question

I'm constantly getting the following warning message. I've tried Isolating each component that is being rendered in the ReanimatedSwipeable component and nothing apart from removing the component makes it go away.

[Reanimated] Reading from value during component render. Please ensure that you do not access the value property or use get method of a shared value while React is rendering a component.

I am getting plans data from useEffect() which calls a database to get the data

  const renderLeftActions = (progress, dragX, index, item) => {
    const translateX = useDerivedValue(() => dragX.value - 60, [dragX]);

    const styleAnimation = useAnimatedStyle(() => {
      return {
        transform: [{ translateX: translateX.value }],
      };
    });

    return (
      <TouchableOpacity
        onPress={async () => await setActivePlan(index, item)}
        style={styles.defaultButton}>
        <Animated.Text style={[styles.defaultButtonText, styleAnimation]}>Set</Animated.Text>
      </TouchableOpacity>

    );
  }

  const renderRightActions = (progress, dragX, item) => {
    const animatedStyle = useAnimatedStyle(() => {
      const translateX = interpolate(
        dragX.value,
        [-60, 0],
        [0, 80], // Move from off-screen to its final position
        Extrapolation.CLAMP
      );

      return {
        transform: [{ translateX }],
      };
    });


    return (
      <TouchableOpacity
        onPress={() => deleteWorkoutPlan(item)}
        style={styles.deleteButton}
      >
        <DeleteIcon name="trash-outline" color={COLORS.white} size={24} animatedProps={animatedStyle} />
      </TouchableOpacity>
    );
  }

  const PLanItem = ({ item, index }) => {
    const translateX = useSharedValue(0);
    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ translateX: withTiming(translateX.value, { duration: 300 }) }],
        opacity: interpolate(translateX.value, [-500, 0], [0, 1], Extrapolation.CLAMP),
      };
    });


    return (
      <Animated.View style={animatedStyle}>
        <ReanimatedSwipeable
          key={index}
          overshootRight={false}
          overshootLeft={false}
          friction={2}
          ref={(ref) => (swipeableRefs.current[index] = ref)}
          renderRightActions={(progress, dragX) => renderRightActions(progress, dragX, item)}
          renderLeftActions={(progress, dragX) => renderLeftActions(progress, dragX, index, item)}
        >
          <Pressable onPress={() => handlePlanPressed(item)}>
            <View style={styles.card}>
              <Text style={styles.planTitle}>{item.name}</Text>
            </View>
          </Pressable>
        </ReanimatedSwipeable>
      </Animated.View>
    );
  };

...
...
<FlatList
          data={allPlans}
          keyExtractor={(item) => item.id}
          renderItem={({ item, index }) => <PLanItem item={item} index={index} />}
        />

doe

Answer 1

To fix this, upgrade your version of react-native-gesture-handler.

If you're using Expo, at the time of writing this, you'll need to exclude the dependency in your package.json:

{ 
  ...
  "expo": { 
    "install": { 
      "exclude": [ 
        "react-native-gesture-handler" 
      ]
    }
  }
}

Then, you can remove the package:

yarn remove react-native-gesture-handler

And re-install the package:

npx expo install react-native-gesture-handler

---

This is a bug in react-native-gesture-handler prior to version 2.21.0. This github issue details the bug and fix: https://github.com/software-mansion/react-native-gesture-handler/issues/3170