How to animate multiple entries using react native reanimated v2?

Question

I am new to reanimated. I am now trying to reanimating multiple items.

These items will not show up at the start of the component on load. But they items will show up when the corresponding item is pressed that my intentions.

eg when button 1 is pressed item 1 will pop up slowly, button 2 is pressed and item 2 like that.

I got 2 component in my app

ItemsList screen and item component

I don't have any animation code in itemList screen. I am just retuning the item component.

{items.map(item => (
          <OtherItem
            key={item._id}
            item={item}
            selectedItem={selectedItem}
            setSelectedItem={setSelectedItem}
          />
        ))}

Inside the item component.I got a sharedValue, useEffecthooks, and useState which I use to animate according to user interaction.

ITEM COMPONENT

 const [selected, setSelected] = useState(false);
    const [count, setCount] = useState(1);
    
  // Animation
  const progress = useSharedValue(0);

  const reAnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: progress.value,
      transform: [{scale: progress.value}],
    };
  });

  useEffect(() => {
    progress.value = withTiming(1, {duration: 2000});
  }, [selected]);



return (
    <TouchableOpacity
          onPress={() => selectItem(item)}
          style={[
            globalStyle.pageContainer,
          ]}>
            {selected && (
                    <Animated.View
                      style={[
                        {flexDirection: 'row', alignItems: 'center'},
                        reAnimatedStyle,
                      ]}>
                      ...
                    </Animated.View>
                  )}
        </TouchableOpacity>)

As you can see in the code, My intention is that when user press button 1 hidden details inside button 1 will show up.

But the thing Is only the first time works. I think its because of the shared value. What I want is I want every item to work. So can any one suggest the solution

where is "button 1"? can you provide more code? or better if you provide with working code in expo snack. — MRPMOHIBURRAHMAN, Oct 31 '21 at 12:48
@MRPMOHIBURRAHMAN I am mapping the `buttons`. I mean `ITEM COMPONENT` itself is the button and there are some hidden text inside each button — Kerry, Nov 01 '21 at 03:19

score 0 · Answer 1 · answered Nov 01 '21 at 14:46

Here is one of many solutions.

Track the selected item on "ItemsList screen" using the following snippet

const [selectedId, setSelectedId] = useState(null);
  const handleSelection = (id) => setSelectedId(id);
  return (
    <SafeAreaView style={styles.container}>
      {ITEMS.map((item) => (
        <OtherItem
          key={item._id}
          item={item}
          handleSelection={handleSelection}
          selectedId={selectedId}
        />
      ))}
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

on "ITEM COMPONENT" screen, use useEffect to change progress.value. If the "ITEM COMPONENT" sees that the current rendered item is selected then it will increase the progreass.value 1 other wise it will decrease it to 0. use the following snippet

useEffect(() => {
    if (selectedId === item._id)
      progress.value = withTiming(1, { duration: 2000 });
    else progress.value = withTiming(0, { duration: 2000 }); // un comment this line if you want to see hidden element of just one item and hide the other item
  }, [selectedId]);

also send a function ( handleSelection in this example ) from "ITEM LIST screen" to "ITEM COMPONENT" screen to track which item is selected.

Here is a expo snack with full source code.

How to animate multiple entries using react native reanimated v2?

1 Answers1