Naughty Pterodactyl Maid

    react-native-whirlwind
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    React Native Whirlwind 🌪️

    A utility-first CSS framework designed for React Native.

    license react-native npm prettier downloads


    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

    supports Expo supports iOS supports Android supports web

    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!

    Install

    npm i react-native-whirlwind

    DownloadsWeekly Downloads

    53

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    654 kB

    Total Files

    64

    Last publish

    Collaborators

    • arabold