How to animate items inside a list?

[akinncar]

I'm trying to animate items inside my AnimatedFlatList but the animations is only applying to last item.

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const animatedTabStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollValue.value,
      [0, 65],
      [1, 0],
      Extrapolate.CLAMP
    )

    return {
      opacity
    }
  })
}

const handleScroll = useAnimatedScrollHandler({
   onScroll: ({ contentOffset }) => {
     scrollValue.value = contentOffset.y
   }
})
  
...
  
<AnimatedFlatList
  onScroll={handleScroll}
  data={tabs}
  renderItem={({ item, index }) => {
    return (
      <Animated.View style={animatedTabStyle}>
        <Text>Hello Reanimated</Text>
      </Animated.View>
    )
  }}
/>

[dannyhw]

I believe that each render item needs an animated style, so something like this should work. Although it will complain if you have the eslint plugin that you shouldn't use hooks like this. If you make the renderitem a component and the style local to the component you can get around that.

<AnimatedFlatList
  onScroll={handleScroll}
  data={tabs}
  renderItem={({ item, index }) => {

   const animatedTabStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollValue.value,
      [0, 65],
      [1, 0],
      Extrapolate.CLAMP
    )

      return {
        opacity
      }
    })
  }
    return (
      <Animated.View style={animatedTabStyle}>
        <Text>Hello Reanimated</Text>
      </Animated.View>
    )
  }}
/>

excuse the bad formatting/indenting 😅

[akinncar]

I tried that but how you said I had some lint rules in my code that don't allow, but separate the logic to another component how you said solved the issue, thank you!