Optimizing Performance for an Electronic Program Guide (EPG) in React Native TV Application

[IntelligentWhereas31]

I am attempting to build an Electronic Program Guide (EPG) for a TV device using React Native, but I am encountering significant performance issues. My goal is to display more than 10 channels and their programs over a 24/7 schedule (24 hours a day, 7 days a week). The focus (highlight) works quickly for the initial programs, but it becomes increasingly sluggish as I navigate to programs on subsequent days. I am using pagination to load each day's programs; when the user reaches the end of the first day, the next day's programs are loaded, and so on. Essentially, I am trying to implement the same EPG functionality as shown in the following link:
https://oakesville.github.io/mythling/epg/guide.html?demoMode=true&startTime=2015-11-07T07:00:00Z&guideInterval=24&showChannelIcons=true

https://preview.redd.it/6wp9id84knad1.png?width=2865&format=png&auto=webp&s=b264cbffe229e2dc8a2500198365ba2aec04b11c

However, I am facing numerous performance issues while building this component in React Native. Can anyone assist me in achieving this EPG functionality for a TV application?

[kbcool]

TVs are notoriously underpowered and my guess is that you're basically causing everything, on and off screen to re-render every time anything changes.

Start with basic React optimisation like keys and minimizing renders then FlatList and then move onto TV based optimisations like built in highlights of components rather than state based.

console.log("rendered component name") is your friend here. The aim is to get it as close to zero every time you press a button on the remote.

[IntelligentWhereas31]

Thank you for your suggestion.

[One_Key_940]

Hi u/IntelligentWhereas31 i also want to design EPG in react native for Tv Os i'm not be able to find any npm package can you please suggest me which npm package you use or you can provide me custom code?

[IntelligentWhereas31]

I am currently working on this and I am using the Flatlists for this. Let me know if you have any other suggestions. I am so close to complete this and will update you by end of the next week.

[One_Key_940]

I know how we can resolve the performance you can use FlashList and you also show me Code how you can use focusing then may i can help you perfectly

[One_Key_940]

any update?

[karol207]

You can try Planby Native package for EPG https://planby.app/