Expo Nativewind Components

What is Expo Nativewind Components?

This package is a collection of reusable React Native components for Expo projects, super charged with NativeWind.

Once you have an expo project setup with NativeWind, you can use these components in place of the core React Native components and pass className props directly to style your components.

index.tsx

import React from "react";
import {
  StyledWindView,
  StyledWindText,
} from "expo-nativewind-components";
 
export default function App() {
  return (
    <StyledWindView classname="h-screen w-full justify-center items-center">
      <StyledWindText className="text-center text-2xl text-red-500">
        Hello, World!
      </StyledWindText>
    </StyledWindView>
  );
}

React native primarily uses flexbox for its layout display and direction is column by default. For more information on this, visit Layout with Flexbox (opens in a new tab)

What's next

Installation Core Components

Installation