What is NativeWind?

NativeWind is a utility-first CSS framework for React Native, inspired by Tailwind CSS. It allows you to style your React Native components using a set of predefined classes, making it easier to create responsive and consistent designs without writing custom styles for each component.

Why is NativeWind?

NativeWind provides a set of utility classes that can be used to style your React Native components. These classes are similar to those in Tailwind CSS, making it easy to apply consistent styles across your app. By using NativeWind, you can avoid writing custom styles for each component and instead use predefined classes to achieve the desired look and feel.

Some benefits of using NativeWind include:

• Consistency: Ensures a consistent design language across your app by using a standardized set of utility classes.
• Productivity: Speeds up development by reducing the need to write custom styles for each component.
• Maintainability: Makes it easier to maintain and update styles, as changes can be made in one place and applied across the app.
• Responsive Design: Simplifies the process of creating responsive layouts that work well on different screen sizes.

By leveraging these benefits, NativeWind can help you build a more polished and professional-looking React Native app with less effort.

Steps to Add NativeWind

1. Install NativeWind: First, you need to install NativeWind and its dependencies. Run the following command in your project directory:

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

2. Setup Tailwind CSS:

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

/** @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}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a CSS file (global.css) and add the Tailwind directives

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

3. Configure Babel: NativeWind requires some Babel plugins to work correctly. Add the following plugins to your babel.config.js file:

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

4. Modify your metro.config.js

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

const config = getDefaultConfig(__dirname);

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

5. Import your CSS file to app/_layout.js

import "../global.css";

6.Typescript

Create a file named nativewind-env.d.ts in your project root with the following content:

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

// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

How to Style with NativeWind

Styling with NativeWind is straightforward. You use class names similar to Tailwind CSS to apply styles to your components. Here are some examples:

• Flexbox Layout:

  <View className="flex-1 justify-center items-center">
    <Text className="text-lg">Centered Text</Text>
  </View>

• Padding and Margin:

  <View className="p-4 m-2 bg-gray-200">
    <Text className="text-base">Padded and Margined View</Text>
  </View>

• Colors and Typography:

  <Text className="text-red-500 font-bold text-xl">Red Bold Text</Text>

You can combine multiple classes to achieve the desired styles, making it easy to build complex layouts with minimal code.

Adding Custom Colors

To add custom colors to your NativeWind setup, you need to extend the default Tailwind CSS theme in your tailwind.config.js file. Here's how you can do it:

/** @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}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        primary: "#4B4376",
        grey: "#444444",
        "spanish-gray": "#999999",
        "ghost-white": "#F2F3F7",
        "red-orange": "#FF5A5F",
        lavender: "#9B7EBD",
      },
    },
  },
  plugins: [],
};

Conclusion

NativeWind brings the power of utility-first CSS to React Native, making it easier to create consistent and responsive designs. By following the steps outlined above, you can quickly add NativeWind to your React Native Expo app and start styling your components with ease. Happy coding!