I have a React Native Typescript app, which will show numerous video players on the screen similar to Instagram or other apps. I get a list of data from a REST API, and as the user scrolls, the app will populate 5 items (video players) of that data. I want to restrict around 25 results in the ScrollView at a time. So as the limit of 25 is reached, it should delete the first 5 items and append 5 new items. I have to do this because my screen becomes very slow and laggy with the increasing number of video players. The code currently does not update the UI:
export const players_control: PlayersControl = {
EACH_SET: 5,
MAX_LIMIT: 25
};
private onScrollReachedEnd(): void {
if (contains(this.contents)) {
const ti: Content[] = this.contents.slice(0, players_control.EACH_SET); // Get 5 each time
this.contents = this.contents.slice(players_control.EACH_SET);
if (contains(ti)) {
this.setState((prevState: State) => {
const c: Content[] = [ ...prevState.contents, ...ti ]; // Add 5 new items
if (c.length >= players_control.MAX_LIMIT) {
// Delete first 5 items
c = c.slice(players_control.EACH_SET);
}
return { contents: c, ... /* Set few other values as well */ };
}, (): void => {
this.nextStep();
});
}
} else this.get(); // Get total results of around 100+ from REST API
}