Setting up react Native + Expo + Tailwind + Gluestack-ui v2

Intro:

• Well I'm new to react native world but not new to the web as i've been a full stack developer for 3+ years now.. And i'm starting to know a bit about mobile development as well.

• In the first week I started with a simple app of changing background color of the app to making a wallpaper app in the first month to utilizing the tools and frameworks in the app development as well..

• Well, who doesn't like their favorite frameworks and tools to work everywhere.. Also it kind of become tedious to write styles like css when you already know tailwind. And if you are coming from a meta framework like Nextjs, Angular, then this post is definately for you.

What shall we do in this post:

1) Setting / creating Expo app (App Router).
2) Installing and configuring Tailwind **in expo.
3) Installing and configuring **Gluestackui v2 library.

1.Creating an expo app.

• First run the below command to create an expo app and if you want to have latest sdk (currently it is 50).

npx create-expo-app@latest

Or to create a project in current folder and it takes the name of the folder.

npx create-expo-app@latest ./

Follow this document for detailed info on creating an Expo App:

2.Installing Tailwind (Long Process Ahead).

• Here point to be noted we are going to use a library called NativeWind that acts as a preprocessor / mediator between our code and tailwind styles.
• This library again comes in 2 versions (v2 and v4(currently in beta)).
• v2 will not ** support Gluestackui v2 so Im installing **v4 nativewind now. Refernce Link

1. Run the below command
   npx expo install nativewind@^4.0.1 react-native-reanimated tailwindcss

2. Then run the next command.
   npx pod-install

3. After this create tailwind.config.ts file at root level using below command.
   npx tailwindcss init

4.Then update the created tailwind.config.js file completely with below snippet

/** @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: [],
}

5.Now create a global.css file at root level and paste the below directives in that css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

6.Now check if you have babel.config.js file and paste the below configuration in that file.

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

7.Now check if you have a file called metro.config.js and if not then run the below command to create the file

npx expo customize metro.config.js

And then paste the below snippet into the created file.

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

8.At this step, if you are using pages router, then import ** the **global.css file in App.tsx. Or, if you are using App Router, then import the global.css file in the root _layout.tsx file.

Ex:

// Import your global CSS file
import "../global.css"

export default RootLayout(){
// stack routes here
}

9.This is an optional step and can only be done if you want to have typescript support for tailwind in your project.

• In the root of your project create a new file named **nativewind-env.d.ts **and paste the triple-slash-directive in that file.

/// <reference types="nativewind/types" />

That's it now your tailwind should be working fine..

Setting up Gluestack-ui v2:

Reference Link

1. Run the command npx gluestack-ui init to **initialize **the library in expo app router project.

2. This shall create all files and setup basic configurations properly and works great in pages router, but we have to do few tweaks to make it work properly app router.

Change 1:

• In babel.config.js

replace the code with below snippet:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", {
      jsxImportSource: "nativewind"
    }], "nativewind/babel"],
    plugins: [
      ["module-resolver", {
        root: ["./"],
        alias: {
          "@": "./"
        }
      }]
    ],
  };
};

Change 2:
Make sure to add ./app and ./components entries in tailwind.config.js file's content array, so that files from that location also gets checked for tailwind classes.

'media',
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
  ],

Change 3:
Now finally replace the contents of metro.config.js with the below snippet

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

Aaaaannnnnndddd That's it..

you can go to components and install any components and use them in your expo project now.!!

Comments

[Shaik Shahbaaz Alam]

Note: Shadow, drop-shadow still doesn't work via nativewind in react native, instead you can use elevation property to set the box shadow.

Ex:

<View className="w-full h-auto bg-white rounded-lg px-4 py-6 space-y-6" 
     style={{ elevation: 4 }} >
</View

[Aftab]

Hi @shahbaazx786 . the link you've given us in expo app creation, tha's showing error 404. kingly give updated link. Thank you