Having array of multiple items (videos) in FlatList, each covering the whole screen. It is tiktok like videos feed where user on single scroll, moves between current and next video. Is it possible to add special scroll effect between desired videos? Let’s say array is mixed of videos with different type, and let’s say I have some videos of type-X
type, so whenever I’m at video of type-X
and apply a scroll, I want next video/card have custom “loading” effect like ease-in or like vertical carousel parallax effect?
const videos = [
{..., type: 'A'},
{..., type: 'B'},
{..., type: 'C'},
{..., type: 'type-X'},
{..., type: 'A'},
{..., type: 'B'},
{..., type: 'type-X'}
];
return <FlatList
keyExtractor={item => item.id}
data={videos}
scrollEnabled={!videoRunning}
alwaysBounceHorizontal={false}
showsHorizontalScrollIndicator={false}
pagingEnabled
horizontal={false}
showsVerticalScrollIndicator={false}
renderItem={(item, index)=> <FullScreenCard data={item} />}
/>