Skip to content

Latest commit

 

History

History
128 lines (82 loc) · 7.02 KB

README.md

File metadata and controls

128 lines (82 loc) · 7.02 KB

NativeWind multiplatform demo

This is an Expo project created with create-expo-app, showing how TailwindCSS styles can be used in React Native apps.

This app can be built for web, mobile devices (iOS, iPadOS, and Android), and TV devices (Apple TV, Android TV).

You can see the web version at

https://nativewindmultiplatform.expo.app/

Some of the packages used:

🚀 How to use

  • cd into the project

  • Build for mobile devices (including iPad tablet support)

yarn
yarn prebuild # Executes a clean Expo prebuild to generate iOS and Android native files
yarn ios # Build and run for iOS
yarn android # Build and run for Android
  • Build for TV devices
yarn
yarn prebuild:tv # Executes a clean Expo prebuild to generate tvOS and Android TV native files
yarn ios # Build and run for Apple TV
yarn android # Build and run for Android TV
  • Web (local development)
yarn
yarn web # Runs the web app as a local development server on port 8081
  • Web (deploy to EAS hosting)
yarn
eas init
yarn build:web # Build the web deployment bundle
yarn deploy:web # Deploy to the EAS hosting dev environment

NOTE: Setting the environment variable EXPO_TV=1 enables the @react-native-tvos/config-tv plugin to modify the project for TV. This can also be done by setting the parameter isTV to true in the app.json.

📝 Notes

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

Theming

Theming and dark/light mode support are provided by the global CSS file. It contains dark and light versions of the custom colors used in the app, as well as custom scale factors for scaling buttons when they are focused, hovered, or active. The colors are the same as those used in the default template used when creating new Expo Router apps.

The root layout sets the theme as the style in the root view.

The themed components demonstrate how to use NativeWind class names and the custom colors to provide consistent text, button, and link appearance. These are used both in the home screen and the tab layout for web.

Tab layout

The app provides a native tab layout using expo-router/unstable-native-tabs.

For web and Android TV, the web tab layout uses the custom tab layout feature of Expo Router.

Focus, hover, and active styles

These are shown in the focus/hover/active demo screen.

  • The buttons are styled with 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.
  • The buttons are also styled with hover:bg-blue-300, to apply that style when the mouse hovers over the button in the web version of the app.
  • Finally, transition duration-500 is applied so that the focus, blur, and hover transitions happen smoothly with an animation.

Compatibility with third party components

In NativeWind v4, the CSSWrappedComponents.tsx file demonstrated how to wrap components provided by Expo and other packages to enable them to use NativeWind class names, using the cssInterop() API. In NativeWind v5, this is no longer needed — components are imported directly from their original packages. The @expo/rncss-components package in this repository provides CSS wrappers for the components used in the app, using the react-native-css package, and provides a custom Metro config so that imports from react-native and other packages are properly redirected to those wrappers.

Changes from SDK 55 (NativeWind v4) to v5

Import path changes

  • Component imports renamed from PascalCase to kebab-case (e.g. @/components/ThemedText → @/components/themed-text, @/hooks/useScreenDimensions → @/hooks/use-screen-dimensions)
  • @/layouts/TabLayout → @/components/app-tabs
  • Removed CSSWrappedComponents barrel import — now imports directly from original packages (SafeAreaView from react-native-safe-area-context, Image from expo-image, LegendList from @legendapp/list)

NativeWind v5 CSS variable syntax

  • Square bracket syntax replaced with parenthetical syntax: bg-[--color-background] → bg-(--color-background)
  • Custom CSS variable text colors now use !important modifier: text-[--light-theme-fg] → text-(--light-theme-fg)!

Component API changes

  • ThemedText now uses color="none" and additionalClassName props instead of direct className overrides
  • ThemedText bold/font/animation styles use !important suffix (e.g. font-bold!, animate-bounce!)
  • Removed useColorScheme toggle button from the home screen
  • Image transform classNames changed to named classes (translateimage, scaleimage)
  • LegendList gained showsScrollIndex={false} prop

Video screen rewrite

  • The VideoTest component import was replaced with an inline VideoDemo component featuring direct use of expo-video (useVideoPlayer, VideoView), playback controls (play/pause, rewind, seek, fullscreen), a custom ProgressBar component, and a useInterval hook for tracking progress

Learn more

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

Join the community

Join our community of developers creating universal apps.