How To Get Springy/Bouncy Effect When Scrolling In Flatlist

Question

How can I make a vertical Flatlist item in React Native to snap into position on scroll and fill up the current window? I want each item to fill up the screen and not for the previous or coming items to show. An example of the effect I want is the achieved in ScrollView by having pagingEnabled={true}. But my problem with this, when applied to Flatlist, is that parts of the previous item shows at the top of subsequent views. This increases in size as you scroll down. The effect I want is like if you are scrolling through TikTok. You see how each video fills up the screen and when you scroll up or down, there is a springy effect that if the scroll is not complete, the current video bounces back into position.

This is my current flatlist:

<FlatList
            data={DATA}
            renderItem={renderItems}
            keyExtractor={item => item.id}
            Animated={true}
            removeClippedSubviews={true}
            refreshControl={
                < RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                />}

Please note that I am using Functional components not classes.

Thanks in advance.

Answer 1

Wow! After hours on this, GeekForGeeks has delivered me! This is the article and all thanks to Brijen Makwana.

The answer is in applying three props already provided by Flatlist to your/my flatlist. They are:

• snapToAlignment='start'
• decelerationRate={'fast'}
• snapToInterval={windowHeight}

So my Flatlist will now look like this:

<FlatList
            data={DATA}
            renderItem={renderItems}
            keyExtractor={item => item.id}
            snapToAlignment='start'
            decelerationRate={'fast'}
            snapToInterval={windowHeight}
        />

Remember to first Import Dimensions from React native and make the Item View have the full height and full width of the window (that is the screen):

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width;

In your stylesheet:

StyleOfItemsContainerForFlatList: {
        height: windowHeight,
        width: windowWidth,
        justifyContent: "center",
        alignItems: "center"
    },

I removed the Refreshcontrol here since it is not relevant to this answer. And just like that my React Native Vertical Flatlist now has a bouncy, springy transition animation like Tiktok and Instagram!

And also, the article shows how you can apply snap animation on Horizontal Flatlists also.

Please check the original article for details.