Correct way to conditionally animate in array of multiple element

[cjmling]

I want to animate view in the list conditionally based on its position in the list. Here are the codes

   <GestureHandlerRootView style={{ flex: 1 }}>
      <GestureDetector gesture={pan}>
        <Animated.View
          ...
          >
          {props.children.map((children, index) => (
            <Animated.View
              style={[
                index === sharedActiveIndex.value ? activeItemAnimatedStyle : index === sharedActiveIndex.value + 1 ? nextItemAnimatedStyle : defaultAnimatedStyle,
              ]}>
              {children}
            </Animated.View>
          ))}
        </Animated.View>
      </GestureDetector>
    </GestureHandlerRootView>

As you see there is animated.view inside .map function. I want to animate the value based on its position in the array. I feel like this isn't the right way and its creating flickering issue upon release of drag, as you can see in this image below.

You can see full code and try here https://snack.expo.dev/k4EsyHF9j

What I can do to fix this?

https://stackoverflow.com/questions/77372996/react-native-reanimated-conditionally-animate-in-array

[MatiPl01]

I can see that your stackoverflow question got accepted answer so I am going to close this discussion.

If you have more questions, fell free to re-open the discussion and ask.