Fluffle

Advanced StyleSheets, the Native way.
Style React Native apps with precision and control

By Bibliolab

Tip

Try Fluffle instantly with the live Expo Snack demo — experiment with rem units, nested styles, responsive layouts, and runtime updates directly in your browser.

Launch the interactive Expo Snack demo and explore in a real React Native app:

👉 React Native Fluffle — Interactive Playground

🚨 Migration Notice

Warning

native-sass has been officially deprecated in favor of @bibliolab/react-native-fluffle. If you are using NativeSass, migration is strongly recommended.

React Native Fluffle is the official successor to NativeSass and will receive all future updates and improvements.

Fluffle is a complete evolution of NativeSass, with:

• 🚀 Improved architecture and developer experience
• 🎨 Better support for nested styles and rem units
• 🌐 Proper cross-platform behavior for native and web
• 🧩 Cleaner API and long-term maintainability
• ⚡ Ongoing development and active support

---

✨ What is Fluffle?

A styling library for React Native that brings advanced styling capabilities inspired by Sass and CSS, while fully respecting the native React Native paradigm.

It allows you to write styles that are:

• More expressive
• More maintainable
• More scalable

Without abandoning the native StyleSheet approach.

---

⚡ Why Fluffle?

React Native styling can become repetitive and hard to scale. @bibliolab/react-native-fluffle solves that by introducing powerful abstractions:

• 🧩 Nested styles (like Sass)
• 🔁 Reusable style patterns
• 🎯 Cleaner and more readable code
• 📏 rem units for scalable design
• 📱 Built specifically for React Native (not a CSS hack)

---

🔥 Example

Without Fluffle

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
  },
  cardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  cardAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    marginRight: 12,
  },
  cardName: {
    fontSize: 18,
    fontWeight: '700',
    color: '#111',
  },
  cardUsername: {
    fontSize: 14,
    color: '#666',
  },
  cardActions: {
    flexDirection: 'row',
    marginTop: 16,
  },
  cardButton: {
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 8,
    marginRight: 8,
  },
  cardButtonPrimary: {
    backgroundColor: '#2563eb',
  },
  cardButtonSecondary: {
    backgroundColor: '#e5e7eb',
  },
  cardButtonTextPrimary: {
    color: '#fff',
    fontWeight: '600',
  },
  cardButtonTextSecondary: {
    color: '#111',
    fontWeight: '600',
  },
});

With Fluffle

import { StyleSheet } from '@bibliolab/react-native-fluffle';

const styles = StyleSheet.create({
  card: {
    padding: '1rem',
    backgroundColor: '#fff',
    borderRadius: '0.75rem',

    header: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: '0.75rem',

      avatar: {
        width: '3rem',
        height: '3rem',
        borderRadius: '1.5rem',
        marginRight: '0.75rem',
      },

      name: {
        fontSize: '1.125rem',
        fontWeight: '700',
        color: '#111',
      },

      username: {
        fontSize: '0.875rem',
        color: '#666',
      },
    },

    actions: {
      flexDirection: 'row',
      marginTop: '1rem',

      button: {
        paddingVertical: '0.625rem',
        paddingHorizontal: '0.875rem',
        borderRadius: '0.5rem',
        marginRight: '0.5rem',

        text: { fontWeight: '600' },

        primary: {
          backgroundColor: '#2563eb',
          text: { color: '#fff' },
        },

        secondary: {
          backgroundColor: '#e5e7eb',
          text: { color: '#111' },
        },
      },
    },
  },
});

Installation

To use Fluffle in your project, just run this command from your terminal if you're using npm:

npm install @bibliolab/react-native-fluffle

Or use the following if you're using yarn or pnpm:

yarn add @bibliolab/react-native-fluffle

pnpm add @bibliolab/react-native-fluffle

Fluffle works with both the React Native CLI and Expo CLI, and the installation steps are the same.

🧠 Philosophy

Fluffle is not a CSS layer on top of React Native. It is designed to enhance the existing styling system — not replace it — keeping performance, predictability, and native behavior intact.

🚧 Upcoming Features

Fluffle is actively evolving. Planned features include:

• 🎨 Object-based shorthand syntax

 padding: { block: "1rem", inline: "2rem" }
 margin: { top: 10, bottom: 20 }
 gap: { row: 8, column: 4 }

• 🧩 Style mixins ($include)
• 📦 Improved composition patterns
• 🧠 Smarter style processing pipeline

These features are designed to enhance developer experience while staying fully compatible with React Native.

📚 Documentation

Full documentation is available at: 👉 react-native-fluffle.github.io

🤝 Contributing

Contributions, ideas, and feedback are welcome! Feel free to open issues or submit pull requests.