DEV Community

Yeasin Arafat
Yeasin Arafat

Posted on

5

React Native Expo with NativeWind v4 and Typescript

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

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;"

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs