React Native Whirlwind 🌪️

A utility-first CSS framework designed for React Native.

Whirlwind is a utility-first CSS framework specifically designed for React Native. It is heavily inspired by both Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

• Readable 👀 - All classes follow a simple, consistent naming convention
• Lightweight 🪶 - No 3rd party dependencies
• Composable 🧱 - Combinable classes for rapid prototyping
• Customizable 💅 - Define your colors, typography, and spacing for your app in one place
• Performant 🚀 - No unnecessary calculations, no unnecessary string parsing, just pure and fast static styles
• Reusable ♻️ - Promote reusability in your team and reduce redundancies in your codebase
• React Native and TypeScript first 🥇 - built for React Native and 100% written in TypeScript for a best-in-class developer experience

Getting Started

React Native has a powerful feature that allows you to pass an array of styles rather than just a single object to the style prop of a component. This can be used to inherit styles. Whirlwind relies on this mechanic to provide a simple, composable API for building custom designs.

1. Install React Native Whirlwind

Install react-native-whirlwind using npm or yarn:

# Using npm
npm install react-native-whirlwind

# Using yarn
yarn add react-native-whirlwind

2. Create Your Theme Definition

Create a new file theme.jsx somewhere in your project source folder, e.g. next to your App.jsx, and call the createTheme function from react-native-whirlwind. To customize your theme, simply pass your desired colors and other properties as parameter:

// theme.jsx
import { createTheme } from 'react-native-whirlwind'

const t = createTheme({
  colors: {
    primary: 'orange',
    secondary: 'blue'
  }
})

export default t

This will customize the primary and secondary colors of your app. The exported constant t acts as the entry point to the Whirlwind style system. You can use any variable name but I recommend using something short and memorable, as it will be heavily used throughout your application. t has proven to be a useful pattern and is recommended for consistency with the documentation and other apps based on Whirlwind.

3. Use Your Theme

Import your theme.jsx in your app and components where needed:

// App.jsx
import { View, Text } from 'react-native'
import t from './theme'

export default function App() {
  return (
    <View style={[t.flex1, t.bgWhite, t.justifyCenter, t.itemsCenter]}>
      <Text style={[t.textPrimary]}>Welcome to Whirlwind</Text>
    </View>
  )
}

Documentation

For full documentation, visit https://arabold.github.io/react-native-whirlwind/.

Live Example

https://snack.expo.dev/@arabold/react-native-whirlwind

Platform Support

Whirlwind is 100% compatible with the Expo Framework and works with both Expo Go and in the bare workflow.

For more details refer to the Platform Support section in the documentation.

Who Is Using Whirlwind?

I'm using the predecessor and variants of Whirlwind for several years now and in many different commercial projects. Some of them have several 100,000s of installs across the App Store and Google Play. Finally, I decided to open source it and make it available to the community. This is how Whirlwind was born.

If you're using it in your project and like to see it listed here, please let me know!