feat: Add CellRendererComponentStyle to Animated.FlatList

[gunnsteinnskula]

Summary

This PR adds a new prop to Animated.FlatList, CellRendererComponentStyle. It has a very similar description as react-native's Pressable style prop, where it can either be a regular animated style, or a function that receives the index and the corresponding item. The naming convention follows react-native's FlatList naming convention (e.g. ListHeaderComponent and ListHeaderComponentStyle).

The idea sprung when trying to implement a draggable FlatList with reanimated's Animated.FlatList and being unable to change the zIndex of the item being dragged, resulting in it always being rendered behind items of a higher index.

After the CellRendererComponent prop was removed from Animated.Flatlist, it became impossible to control styles that need to be altered in the top-level element - specifically zIndex.
While it would be possible to use Animated.createAnimatedComponent and mimic the logic of Animated.FlatList for anything but the style of the CellRendererComponent, this API seems to have at least some attraction within the community and therefore is being suggested.

Test plan

Simply adding this code snippet as a property on an Animated.FlatList should show that it functions as intended. See video below where this snippet was added to the InvertedFlatListExample.tsx example.

      CellRendererComponentStyle={({ index }) => ({
        backgroundColor: index % 2 === 0 ? 'red' : 'blue',
      })}

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-10-04.at.15.47.20.mp4