How to animate multiple entries using react native reanimated v2? - react-native

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

Answer 1

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.