iiinova — where your digital self keeps evolving

Reviving and Optimizing react-native-video-player: From Outdated to Efficient and Modern

📝 I’ve written a detailed blog about the update process, covering: - Using react-scan to identify rerendering issues - Leveraging react-devtools Profiler for precise upgrade 👉 www.thewidlarzgroup.com/blog/revivin... Feel free to share your thoughts or your own optimization stories :)

thewidlarzgroup.com

Discover how we modernized and optimized the react-native-video-player library, tackling unnecessary rerenders, improving performance, and reducing initial load times. Learn about our approach to main...

010

📚 A quick recap: react-native-video-player extends react-native-video with custom controls for an enhanced user experience. Big shoutout to @aidenybai.bsky.social for creating the react-scan tool! It was a game-changer in analyzing rerender behavior 🙌

👀 Curious how it looked before the optimization? Here’s a video showing the rerendering process pre-fix compare

100

react-native-video-player 0.16 is live! This release focuses on 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 🎯 See the new, optimized rerenders in action 👇 Previous behavior in the thread 🧵

Kamil Moskala @moskalakamil.com · 16/12/2024

react-native-video v7 paired with legend-list delivers great performance. 🚀 Here’s a quick demo of a popular use case: Tiktok-style apps with HLS videos, instantly loaded thanks to preloading 🎉

Kamil Moskala @moskalakamil.com · 14/12/2024

The stable version of 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘃𝗶𝗱𝗲𝗼-𝗽𝗹𝗮𝘆𝗲𝗿 v0.15 is here! 🚀 This update includes: 1️⃣ default TypeScript support 2️⃣ web-hosted docs 3️⃣ controls show/hide animation 4️⃣ upgraded react-native-video & removed unnecessary dependency 5️⃣ seamless app integration (no native changes needed)

151

For the video player, I used the react-native-video library. To make everything run smoothly, we added basic support for web-based TVs as well 🌐

100

iOS default controls look great and work seamlessly, but Android's? Not so much. I added custom controls for Android to enhance the experience 🛠️

100

Since the template is primarily for TV apps, proper focus management was crucial. I used the react-tv-space-navigation library to ensure smooth navigation with the TV remote 🎯