Extending React Native Apps to the Big Screen
summary
Shows how to port mobile React Native apps to TVs using the react-native-tvos fork and Expo support, with concrete UX changes: NFL-style screens drop from ~10 mobile items to ~8 TV items, navigation moves to top/left, and D‑pad focus management is required. Recommends ignite TV, react‑pixel‑perfect for scaling, and BAM/Theodo’s TV navigation components. Demonstrates a demo on an old Fire TV stick where removing scaling animations flips a low‑score CPU profile to a 100 on the Flashlight tool. Covers TurboModules/native APIs and feature flags for low‑end devices.
AI-written summary · about
chapters (12)
- 0:00Introduction by hosts
- 1:03Why Amazon uses React Native
- 3:56Why develop for TV
- 5:40Big screen UX principles
- 8:33D-pad and focus management
- 10:24Developing TV apps with React Native
- 13:41Handling different TV screens
- 15:08Focus management challenges
- 17:17Performance and animations
- 19:02Ignite TV for TV apps
- 20:47Amazon’s TV app resources
- 21:50Supporting developers
related talks
25mBuild a React Native App for TV in 15 minutes
29mExtend React Native Beyond Mobile & Desktop App
14mReact Native on the Apple TV Platform
37mCreating Engaging Android TV and Fire TV Apps with Native and Cross-Platform Tools
40mAlso develop for TVs (AppleTV and AndroidTV)
22mCoding Session: React Native Practice
31mFrom React to Native
25mZero to $10 Million with React Native + Next.js