NativeWindTV

This is an Expo Router SDK 52 project demonstrating how Tailwind CSS styles can be used in a React Native app for TV.

Some of the packages used:

• The React Native TV fork, which supports both phone (Android and iOS) and TV (Android TV and Apple TV) targets
• The React Native TV config plugin, to allow Expo prebuild to modify the project's native files for TV builds
• The NativeWind package which lets you use Tailwind CSS in react-native.
• The react-native-bottom-tabs package that provides a fully native tab bar (top bar for Apple TV, bottom bar for Android TV).

🚀 How to use

• cd into the project

• TV builds:

yarn
yarn prebuild:tv # Executes Expo prebuild with TV modifications
yarn ios # Build and run for Apple TV
yarn android # Build and run for Android TV

• Mobile builds:

yarn
yarn prebuild # Executes Expo prebuild without TV modifications
yarn ios # Build and run for iOS
yarn android # Build and run for Android mobile

📝 Notes

The UI is derived from the NativeWind example app plus this Tailwind CSS example. It includes custom CSS transforms.

In tvdemo.tsx, note that the button style includes focus:bg-blue-300 and active:bg-green-600. On TV, the focus prefix causes the style to be applied to controls when onFocus() is invoked, and the style is removed when onBlur() is invoked. On both TV and mobile, the active prefix applies the style when onPressIn() is invoked, and removes it when onPressOut() is invoked.

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
• Building Expo apps for TV

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.