React-native-turbo-styles NPM

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.

Example of auto-complete using TurboStyles

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>
  );
};