Need to scroll single item view in Flatlist, irrespective of the snap speed

Question

My code works fine for normal snap, but when snapped with speed. It scrolls multiple rows. Need a solution Something similar to ios native isPagingEnabled flag or like TikTok app video scroll.

Heres my code

import React, { Component } from 'react';
import { View, FlatList, Text, Dimensions, StyleSheet, StatusBar } from 'react-native';


export default class Videos extends Component {

    static navigationOptions = ({ navigation, navigationOptions }) => {
        return {
            header: null
        };
     };

    constructor(){
        super();
        this.colorData = [
            'rgb(255,140,140)',
            'rgb(253,244,128)',
            'rgb(5,217,200)'
        ]
    }

    render() {
        return (
            <View>
                <StatusBar translucent={true} backgroundColor={'transparent'} />
                    <FlatList

                        horizontal={false}
                        decelerationRate={0}
                        snapToAlignment={"center"}
                        snapToInterval={Dimensions.get('screen').height}

                        data={this.colorData}
                        keyExtractor={(item, index) => `id_${index}`}
                        style={styles.fullScreen}
                        renderItem={({ item }) => <View style={[{...styles.fullHeight}, {backgroundColor: item}]}  />}
                    />
            </View>
        )
    }
}

let styles = StyleSheet.create({
    fullScreen: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height,
    },
    fullHeight: {
        width: '100%',
        height: Dimensions.get('screen').height
    }
});

It works fine with normal scroll, but when scrolled with force from top to bottom multiple items are scrolled. I need to scroll only one row at a time.

Answer 1

This is what finally worked for me

<FlatList
  snapToAlignment={'top'}
  viewabilityConfig={{ itemVisiblePercentThreshold: 90 }}
  pagingEnabled={true}
  decelerationRate={'fast'}
  data={this.colorData}
  keyExtractor={(item, index) => `id_${index}`}
  initialNumToRender={maxVideosThreshold}
  style={inlineStyles.fullScreen}
  renderItem={this._renderItem}
  renderItem={({ item }) => <View style={[{ ...styles.fullHeight }, { backgroundColor: item }]} />}
/>

Answer 2

After half an hour of research I found disableIntervalMomentum.

    <FlatList
        [...]
        disableIntervalMomentum
    />