How to Setup Expo with NativeWind

Fernando Chaves

July 22st, 2024

Setting up Expo with NativeWind allows you to use Tailwind CSS-like styling in your React Native projects. This guide will walk you through the process step by step.

Prerequisites

Node.js installed on your machine
Expo CLI installed globally
A basic understanding of React Native and Expo

Step 1: Create a new Expo project

First, let's create a new Expo project using the Expo CLI:

npx create-expo-app my-nativewind-project
cd my-nativewind-project

Step 2: Install NativeWind

Now, let's install NativeWind and its dependencies:

npm install nativewind
npm install --save-dev tailwindcss

Step 3: Configure Tailwind CSS

Create a `tailwind.config.js` file in your project root:

npx tailwindcss init

Then, update the `tailwind.config.js` file:

module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
  extend: {},
},
plugins: [],
};

Step 4: Update your Babel configuration

In your `babel.config.js` file, add the NativeWind babel plugin:

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

Step 5: Use NativeWind in your components

Now you can start using NativeWind in your components. Here's an example:

import { Text, View } from 'react-native';

export default function App() {
return (
  <View className="flex-1 items-center justify-center bg-white">
    <Text className="text-xl font-bold text-blue-500">
      Welcome to Expo with NativeWind!
    </Text>
  </View>
);
}

Conclusion

You've now successfully set up Expo with NativeWind! You can start using Tailwind CSS classes in your React Native components for efficient and consistent styling.

How to Setup Push Notifications in React Native: A Complete Guide

December 9, 2024

Learn how to set up Push Notifications in React Native using Expo Notifications and Firebase Cloud Messaging (FCM) for effective user engagement.

#react-native#push-notifications+1

React Native Supabase Integration: A Comprehensive Guide for Expo Projects

August 4, 2024

Master the integration of Supabase with React Native and Expo. Learn how to build powerful, scalable mobile apps with this open-source Firebase alternative.

#supabase#expo