Overview

React Native Whirlwind is a utility-first CSS framework specifically designed for React Native, heavily inspired by Tachyons and Tailwind CSS. It offers a simple and consistent naming convention, no 3rd party dependencies, customizable theming, and promotes reusability while being performant and compatible with React Native and TypeScript.

Features

• Readable - Simple, consistent naming convention for all classes.
• Lightweight - No 3rd party dependencies for a lean framework.
• Composable - Easily combinable classes for rapid prototyping.
• Customizable - Define colors, typography, and spacing in one place.
• Performant - Optimized for speed with no unnecessary calculations.
• Reusable - Encourages reusability to reduce redundancies in code.
• React Native and TypeScript first - Tailored for React Native and written in TypeScript.

Installation

1. Install React Native Whirlwind using npm or yarn:

   npm install react-native-whirlwind
   

   or

   yarn add react-native-whirlwind
   

2. Create Your Theme Definition: Create a new file (e.g., theme.jsx) in your project source folder and call the createTheme function from react-native-whirlwind. Customize your theme by passing desired colors and properties as parameters:

   import { createTheme } from 'react-native-whirlwind';
   
   const { theme: t } = createTheme({
       colors: {
           primary: 'blue',
           secondary: '#f0f0f0',
       },
   });
   

3. Use Your Theme: Import your theme.jsx in your app and components where needed:

   import { t } from './theme';
   

Summary

React Native Whirlwind is a utility-first CSS framework with a focus on simplicity, performance, and customizability. By leveraging simple class names and a composable API, developers can rapidly prototype custom designs. With its compatibility with React Native and TypeScript, Whirlwind offers a modern and efficient solution for building mobile apps.