React-native-attributify NPM

React Native Attributify Alpha

⚠️ Alpha Status: This project is currently in alpha stage. While core features are working, you might encounter bugs or performance issues. Please test thoroughly before using in production.

React Native Attributify is a utility-first styling system for React Native, bringing the power of atomic CSS to React Native development. Inspired by the simplicity of UnoCSS, the flexibility of Tailwind CSS, and the developer experience of NativeWind.

Inspiration & Core Concepts

This project draws inspiration from several innovative projects:

UnoCSS: Atomic CSS engine approach and attributify mode
Tailwind CSS: Utility-first philosophy and class naming conventions
NativeWind: React Native integration patterns and optimizations
Windi CSS: Attributify mode concept and dynamic variant generation

Features

Core Features

🚀 Zero Runtime CSS-in-JS
🎯 TypeScript Support
💪 Auto-Completion
🎨 Style Composition
📦 Multiple Presets

Style Categories

Flexbox & Layout
Spacing & Sizing
Colors & Backgrounds
Typography
Borders & Shadows
Position & Display
And more...

Installation

# Using npm
npm install react-native-attributify

# Using yarn
yarn add react-native-attributify

Setup

TypeScript Configuration

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react-native",
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "node_modules/react-native-attributify/presets/native/index.d.ts"
  ]
}

Babel Configuration

const attributify = require('react-native-attributify/babel');

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

Configuration

Create an attributify.config.js file in your project root:

const { nativePreset } = require('react-native-attributify/presets');

const config = {
  // Optional prefix for generated style names
  prefix: 'myapp_',

  // Presets to use
  presets: [nativePreset()]
};

module.exports = config;

Configuration Options

`prefix`

Type: string
Default: ''
Description: Prefix for generated style names in StyleSheet.create

`presets`

Type: Array
Default: []
Description: Array of presets to use. Built-in presets include:
- nativePreset: Core React Native styles
- layoutPreset: Flexbox and layout utilities

Example with Multiple Presets

const { nativePreset, layoutPreset } = require('react-native-attributify/presets');

const config = {
  prefix: 'myapp_',
  presets: [
    nativePreset()
  ]
};

module.exports = config;

Available Presets

Layout Preset

Core layout utilities:

<View
  flex="1 center"       // Flex with center alignment
  justify="between"     // Space-between
  items="center"        // Center items
  p="4"                 // Padding
  m="t-2"               // Margin top
/>

Native Preset

React Native specific utilities:

<View
  bg="white"           // Background color
  rounded="lg"         // Border radius
  opacity="75"         // Opacity
/>

Style Categories

Layout & Flexbox

<View
  flex="1"              // Basic flex
  flex="row"            // Direction
  flex="1 center"       // Flex with alignment
  items="center"        // Align items
  justify="between"     // Justify content
  wrap="wrap"           // Flex wrap
/>

Spacing

<View
  p="4"                // All sides padding
  px="4"               // Horizontal padding
  py="2"               // Vertical padding
  m="4"                // All sides margin
  mt="4"               // Top margin
  mb="2"               // Bottom margin
/>

Colors & Backgrounds

<View
  bg="blue-500"         // Background color
  bg="white opacity-75" // With opacity
  opacity="50"          // Standalone opacity
/>

<Text
  color="blue-500"      // Text color
  opacity="75"          // Text opacity
/>

Borders

<View
  border="1"            // Border width
  border="2 dashed"     // Border style
  border="1 solid red"  // Full border
  rounded="lg"          // Border radius
  rounded="t-lg"        // Top radius
/>

Typography

<Text
  text="center"          // Text align
  font="bold"            // Font weight
  size="lg"              // Font size
  color="gray-700"       // Text color
  decoration="underline" // Text decoration
/>

How It Works

Write This:

<View
  flex="1 center"
  bg="white"
  p="4"
  rounded="lg"
  border="1 solid gray-200"
>
  <Text
    text="xl blue-500 center"
    font="bold"
  >
    Hello World
  </Text>
</View>

Compiles To:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  myapp_vnb1fo: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#E5E7EB'
  },
  myapp_2u4wzb: {
    fontSize: 20,
    color: '#3B82F6',
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

<View style={styles.myapp_vnb1fo}>
  <Text style={styles.myapp_2u4wzb}>
    Hello World
  </Text>
</View>

Complex Example:

Write This:

function ProfileCard() {
  return (
    <View
      flex="1"
      bg="white"
      rounded="xl"
      p="4"
      border="1 solid gray-200"
      shadow="lg"
    >
      <Image
        source={require('./avatar.png')}
        size="100"
        rounded="full"
        border="2 solid blue-500"
      />

      <View p="t-4">
        <Text
          text="2xl blue-600 center"
          font="bold"
        >
          John Doe
        </Text>

        <Text text="gray-500 center">
          Software Developer
        </Text>
      </View>

      <TouchableOpacity
        bg="blue-500"
        p="y-2 x-4"
        rounded="lg"
        mt="4"
      >
        <Text text="white center">
          Follow
        </Text>
      </TouchableOpacity>
    </View>
  )
}

Compiles To:

const styles = StyleSheet.create({
  profile_container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 6
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: '#3B82F6'
  },
  content: {
    paddingTop: 16
  },
  name: {
    fontSize: 24,
    color: '#2563EB',
    textAlign: 'center',
    fontWeight: 'bold'
  },
  title: {
    color: '#6B7280',
    textAlign: 'center'
  },
  button: {
    backgroundColor: '#3B82F6',
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 8,
    marginTop: 16
  },
  buttonText: {
    color: '#FFFFFF',
    textAlign: 'center'
  }
});