DEV Community

Yeasin Arafat
Yeasin Arafat

Posted on

React Native Expo with NativeWind v4 and Typescript

#expo #nativewindv4 #reactnative #beginners

I'm writing this because I faced the problem recently. When I was wasting my time, the solution was right in front of me in documentation.

Steps

Create an expo app

npx create-expo-app@latest
Enter fullscreen mode Exit fullscreen mode

this will create a template for your project.

NativeWind v4 installation

Step 1

Install nativewind in expo with necessary packages given in doc

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

Step 2

then run

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

this will create an tailwind.config.js file.
and paste this, also find it in documentation of nativewind v4

/** @type {import('tailwindcss').Config} */ module.exports = { // NOTE: Update this to include the paths to all of your component files. content: ["./app/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: {}, }, plugins: [], }
Enter fullscreen mode Exit fullscreen mode

Step 3

Now, create a global.css file in root directory.

Step 4

Update babel.config.js. If you are using expo which is below 50 then follow expo below 49 sdk

module.exports = function (api) { api.cache(true); return { presets: [ ["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel", ], }; };
Enter fullscreen mode Exit fullscreen mode

Step 5

Create metro.config.js if not have, then add this below codes. This is for Expo SDK 50+ only. If you are using expo which is below 50 then follow expo below 49 sdk

const { getDefaultConfig } = require("expo/metro-config"); const { withNativeWind } = require("nativewind/metro"); const config = getDefaultConfig(__dirname); module.exports = withNativeWind(config, { input: "./global.css" });
Enter fullscreen mode Exit fullscreen mode

Step 6

Create an nativewind-env.d.ts file and add

/// <reference types="nativewind/types" />
Enter fullscreen mode Exit fullscreen mode

For the final step, import the global.css to the app/_laybout.tsx

import { Stack } from "expo-router"; import * as SplashScreen from "expo-splash-screen"; import "react-native-reanimated"; import "../global.css"; // Prevent the splash screen from auto-hiding before asset loading is complete. SplashScreen.preventAutoHideAsync(); export default function RootLayout() { return ( <Stack> <Stack.Screen name="index" options={{ headerShown: false }} /> </Stack> ); }
Enter fullscreen mode Exit fullscreen mode

Now, tailwindcss is working in your react native expo project with NativeWind v4.

import React from "react"; import { Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; const App = () => { return ( <SafeAreaView> <Text className="text-blue-600 font-bold text-3xl "> Creating app with expo </Text> </SafeAreaView> ); }; export default App;
Enter fullscreen mode Exit fullscreen mode

Working...

Image description

Note: All these are written in the Official documentation of NativeWind. I just wanted to keep them here, so that no newbie face the problem like me and waste their precious time.

Top comments (2)

Collapse
 
earth_moon_0ebf6ba6e0e3d9 profile image
Earth moon •

In global.css file, I would suggest to add this code: "@tailwind base;
@tailwind components;
@tailwind utilities;"

Some comments may only be visible to logged-in visitors. Sign in to view all comments.