React Native TurboStyles

👉 Check out the official docs here 👈

React Native Turbo Styles is a TailwindCSS-inspired styling library for React Native with a goal of:

• Design by constraints (using theme-constraints to guide design).
• Styling ergonomics (short, nemonic "names" for styles, similar to utility classes in CSS).
• Strongly-typed.

Installation

Install the library with:

# With Yarn
yarn add react-native-turbo-styles

# With NPM
npm install react-native-turbo-styles

There are no hard requirements/dependencies for TurboStyles, but the library makes heavy use of TypeScript template literal types. These were release in TS 4.1, and therefore for type-safety/inference to work as intended, you must be using at least TS 4.1.0.

Usage

To use the library, you create a style builder (by providing constraints) and then use the style builder to style things!

import * as React from "react";
import { View } from "react-native";
import {
  createStyleBuilder,
  defaultConstraints,
} from "react-native-turbo-styles";

const { builder: ts } = createStyleBuilder(defaultConstraints);

const MyComponent: React.FC = () => {
  return (
    <View style={ts("flex:1", "justify:center", "items:center", "bg:blue-300")}>
      <View style={ts("w:32", "h:32", "bg:white", "shadow:lg")} />
    </View>
  );
};

TODO:

• [ ] letterSpacing (tracking)
• [ ] lineHeight (leading)
• [ ] Text shadows?