React Native "onViewableItemsChanged" not working while scrolling on dynamic data

Question

I have a React Native FlatList. base on Documentation I used onViewableItemsChanged for getting the current showing item on the screen. but while scrolling or when scrolling stops nothing happens and I can't get the current Id. How Can I use it in correct way?

export default class TimeLine extends Component {
constructor(props) {
    super(props);
    this.renderTimeline = this.renderTimeline.bind(this);
    this.state = {
        timeline: [],
    };
    this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this);
    this.viewabilityConfig = {
        itemVisiblePercentThreshold: 50,
    };
}
...
renderTimelineList(timeline_data) {


    return (

        <Card key={timeline_data.unique_id}>
            <CardItem style={styles.header}>
                <Left>
                    <Icon type="MaterialIcons" name={this.timelineIcon(timeline_data.type)}/>
                    <Body>
                    <Text style={styles.header_title}>{timeline_data.title}</Text>

                    </Body>
                </Left>
            </CardItem>

            <CardItem>
                {this.renderTimeline(timeline_data)}
            </CardItem>

            <CardItem>
                <Left>
                    <Icon small name="time" style={styles.small_font}/>
                    <Text note style={styles.small_font}>{timeline_data.release_date}</Text>
                </Left>
                <Right>
                    <Text note style={styles.small_font}>{timeline_data.duration}</Text>
                </Right>
            </CardItem>
        </Card>
    );


}
render() {
    return (
        <Container>
            <Content>
                <FlatList
                    key={this.state.key}
                    onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}
                    data={this.state.timeline}
                    renderItem={({item}) => this.renderTimelineList(item)}
                />
            </Content>
        </Container>
    );
};
}

Possible duplicate of [How to get currently visible index in RN flat list](https://stackoverflow.com/questions/45868284/how-to-get-currently-visible-index-in-rn-flat-list) — Balasubramanian, Apr 10 '18 at 06:25

score 8 · Answer 1 · answered Aug 01 '19 at 19:04

8

Make sure that you implement keyExtractor correctly (or implement it if you haven't already).

In my case keyExtractor was returning null for many children, and onViewableItemsChanged would not dispatch for those.

answered Aug 01 '19 at 19:04

SudoPlz

20,996
12
82
123

this is right, if there is some issue with keyExtractor it does not work.. – Samiksha Jagtap Jan 05 '23 at 08:25

score 3 · Accepted Answer · answered Apr 10 '18 at 10:22

I solved the problem myself. The problem was because of I was trying to populate the data with Ajax. To solve that I ran the request from the Parent component and passed it in props and inside the constructor of the class if filled the state for my array.

Another thing that you should consider is that you should render the whole FlatList inside a View.

here is my final code:

export default class TimeLine extends Component {
constructor(props) {
    super(props);
    this.viewabilityConfig = {
        minimumViewTime: 500,
        viewAreaCoveragePercentThreshold: 60,
    };
}
render() {
    const {timeline} = this.state;
    return (
        <View style={styles.container}>
            <FlatList
                data={timeline}
                renderItem={({item}) => this.renderTimelineList(item)}
                viewabilityConfig={this.viewabilityConfig}
                onViewableItemsChanged={({viewableItems}) => this.handleViewableItemsChanged(viewableItems)}
            />
        </View>
    );

};
}

this error seems to be related by using other parent components (Container, Content)... — jdnichollsc, Aug 28 '18 at 01:40

React Native "onViewableItemsChanged" not working while scrolling on dynamic data

2 Answers2

Linked