Skip to main content

Utility-First Fundamentals

How the syntax system works, what flaws the other approach has that NativeFlow fixes

Why NativeFlow ?​

The regular way to write styles in a React Native project is primarily through stylesheet objects, using properties a lot similar to the CSS for Web but using the CSS-in-JS type of syntax.

The CSS-in-JS type of properties are verbose and take a bit of workaround to get running up due to newer namespaces, etc.


So while preserving the Native approach, we get up running with shorter syntax, with NativeFlow



You can focus on the design, we'll make it quicker for you

We use utility-objects, not classes, but why?​

  • React Native was naturally meant to work around with stylesheet objects not classNames
  • We forcefully started injecting tailwind with the help of babel which worked fine, but breaks sometimes, more than often
  • The babel-injected approach also lacked animations and platform specific properties like elevation or borderCurve
  • And why should we hassle if we can stay close to the environment

Imports​

The only 'caveat' in using NativeFlow is, uhh... Imports, these being style objects need to be manually imported from the library, You can keep referring this section for Iports until something tasty is being cooked 🍛

Common Imports​

import { p, m, flex, align, text, justify, bdr, fx, h } from "nativeflowcss";

Everything Imports​

import { p, m, flex, align, justify, place, text, decoration, w, h, size, fx, shadow, aspect, object_fit, display, direction, pos, z, overflow } from "nativeflowcss";