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

user_3061349 0
Viewed 5407

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.

react-native-flatlist react-native
3 Answers

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 }]} />}
/>
user_30613490

After half an hour of research I found disableIntervalMomentum.

    <FlatList
        [...]
        disableIntervalMomentum
    />
user_124481250

I have tried most of the approaches but none had worked for me.

<SwiperFlatList
  vertical={true}
    data={data}
    showsVerticalScrollIndicator={false}
    snapToInterval={heighth}
    snapToAlignment={'height'}
    declarationRate={'normal'}
    pagingEnabled
    renderItem={renderItem}
    keyExtracter={(item, index) => index.toString()}
    onChangeIndex={onChangeIndex}
    disableintervalmomentum={true}
    windowSize={4}
    initialNumToRender={0}
    maxToRenderPerBatch={2}
    removeClippedSubviews
    viewabilityConfig={{
      itemVisiblePercentThresold:100
    }}
   

  />
user_164852870
Related