DEV Community

Cover image for Setting up react Native + Expo + Tailwind + Gluestack-ui v2
Shaik Shahbaaz Alam
Shaik Shahbaaz Alam

Posted on • Edited on

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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",
    ],
  };
};
Enter fullscreen mode Exit fullscreen mode

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' })

Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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: {
          "@": "./"
        }
      }]
    ],
  };
};
Enter fullscreen mode Exit fullscreen mode

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}',
  ],
Enter fullscreen mode Exit fullscreen mode

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' })
Enter fullscreen mode Exit fullscreen mode

Aaaaannnnnndddd That's it..

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

Top comments (3)

Collapse
 
shahbaazx786 profile image
Shaik Shahbaaz Alam • Edited

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

Enter fullscreen mode Exit fullscreen mode
Collapse
 
aftabdoingit profile image
Aftab

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

Collapse
 
shahbaazx786 profile image
Shaik Shahbaaz Alam

Hi @aftabdoingit , sorry for the late reply,
Link is fixed.