npm

react-native-turbo-styles
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

TurboStyles Icon
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.

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

TODO:

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

Package Sidebar

Install

npm i react-native-turbo-styles

Weekly Downloads

2

Version

0.1.0

License

MIT

Unpacked Size

71.3 kB

Total Files

24

Last publish

Collaborators

  • gksander