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>
);
};
}
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>
);
};
}