Install Nitrowind in React Native
Install Nitrowind in React Native or Expo, configure Metro and Tailwind CSS v4, and render your first native className component.
Install Nitrowind in React Native
Expo and framework-less React Native are supported
Both use the same Nitrowind runtime and Tailwind CSS v4 compiler. Select the Metro import for your app, then follow the shared steps below.
Install the packages
Choose your package manager:
yarn add @nitrofoundation/nitrowind @nitrofoundation/nitrocss tailwindcss react-native-nitro-modulesAdd optional peers only when you use their integrations:
yarn add react-native-svg react-native-reanimatedreact-native-svg enables className-styled SVG primitives. react-native-reanimated enables entering, exiting, layout, and animation helpers.
Configure Metro
const { getDefaultConfig } = require('expo/metro-config');
const { withNitrowindMetroConfig } = require('@nitrofoundation/nitrowind/metro');
module.exports = withNitrowindMetroConfig(getDefaultConfig(__dirname), {
input: './global.css',
});No Babel plugin
The Metro plugin compiles CSS and class candidates at build time. Nitrowind does not require a Babel transform.
Create the Tailwind CSS entry
@import 'tailwindcss';
@theme {
--color-brand: oklch(0.72 0.11 178);
--color-surface: #ffffff;
--color-on-surface: #111827;
}
.dark {
--color-surface: #09090b;
--color-on-surface: #f9fafb;
}For TypeScript projects, declare CSS side-effect imports once:
declare module '*.css';Import CSS and add the provider
import './global.css';
import { NitrowindProvider, Text, View } from '@nitrofoundation/nitrowind';
export default function App() {
return (
<NitrowindProvider>
<View className="flex-1 items-center justify-center bg-surface pt-safe">
<Text className="text-xl font-bold text-brand">Hello Nitrowind</Text>
</View>
</NitrowindProvider>
);
}Complete the native install
NitroCSS contains native code, so rebuild the native app after adding or upgrading React Native, Nitro Modules, NitroCSS, or Nitrowind.
Expo projects created without ios and android directories use Continuous Native Generation.
Generate the native project, install pods, build, and launch with:
npx expo run:iosUse npx expo run:android for Android. These commands include the autolinked NitroCSS and Nitro
Modules native code. Expo Go does not contain custom native modules; use this local development
build to exercise the native engine.
Verify the installation
Expected result
Start Metro, open the app, and confirm that the centered text uses your brand token. Switch the
root to .dark to verify that runtime theme dependencies update natively instead of being
resolved again in JavaScript.
Continue with global CSS, theming, or the complete feature matrix.