npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-style-buddy

v0.0.10

Published

Styling library for React Native

Downloads

49

Readme

React Native Style Buddy

Introduction

React Native Style Buddy is a TailwindCSS-inspired styling library for React Native. Style Buddy aims to be your style buddy by making your life easier when styling your next React Native app, offering a thorough set of styling helpers:

  • thorough set of built-in styling utilities (spacing, colors, typography, etc.);
  • extendable and overridable theming system;
  • type-safety for speedy and confident development;
  • dark-mode support out of the box.

Here's a snapshot of what you get to look forward to. Check out that sweet, sweet autocomplete. 🤤

Sample of VSCode usage

Installation

Install react-native-style-buddy using your favorite package registry tool:

npm install react-native-style-buddy # npm, or
yarn add react-native-style-buddy # yarn, or
pnpm add react-native-style-buddy # pnpm

Important! Style Buddy's type-safety and style-name inference is possible due to template literal types in TypeScript. Template literal types were released in TypeScript 4.1, and therefore for you to get type safety/inference – your project will need to be using at least typescript: "4.1.0".

Getting Started

Style Buddy consists of a core method createStyleBuddy that allows you to customize your theme, add some extra style handlers, and it will return styling helpers to make your life easier.

Wrap your app in a StyleProvider

Start by wrapping your app in a StyleProvider instance, which is used by Style Buddy under the hood (for things such as dark mode support).

// App.tsx
import { StyleProvider } from "react-native-style-buddy";

export const App = () => {
  return (
    <StyleProvider>
      {/* The rest of your app body... */}
    </StyleProvider>
  );
};

Create helpers

Then use the createStyleBuddy method to generate styling helpers.

import { createStyleBuddy } from "react-native-style-buddy";

const { styles, useStyles, makeStyledComponent } = createStyleBuddy();

Styling elements

With your new styling utilities (see Default Handlers for more info on styling handlers you get out of the box), you can quickly style elements.

import { createStyleBuddy } from "react-native-style-buddy";
import { View } from "react-native";

const { styles, useStyles, makeStyledComponent } = createStyleBuddy();

// Use styles anywhere to generate a style object
const Component1 = () => {
  return <View style={styles("w:4", "h:8", "bg:red-300")} />;
};

// Or use useStyles to generate a style object with dark-mode support
const Component2 = () => {
  const viewStyles = useStyles({
    baseStyles: ["w:4", "h:8", "bg:red-300"],
    darkStyles: ["bg:red-800"]
  });
  
  return <View style={viewStyles} />;
};

// Or, generate a reusable styled component for easy application of styles
const StyledView = makeStyledComponent(View);
const Component3 = () => {
  return <StyledView classes={["w:4", "h:8", "bg:red-300"]} darkClasses={["bg:red-800"]} />;
};

Customizing the theme

Style Buddy ships with a suite of default handlers that use the default theme to create the applicable style "names" (such as "w:4"). This default theme is overridable and extendable. To override the default theme constraints, you can pass a theme argument to createStyleBuddy.

import { createStyleBuddy } from "react-native-style-buddy";

const { styles } = createStyleBuddy({
  theme: {
    spacing: { sm: 4, md: 8, lg: 16 }
  }
});

// Now the spacing helpers, like m: and p:, use the spacing constraints above.
styles("px:sm", "py:md", "m:lg");

Note that by passing a constraints field, such as spacing or colors, you'll override the respective default theme constraints. See Extending the theme for more details on how this works. If you want to just extend the default theme constraints, use the extendTheme parameter.

import { createStyleBuddy } from "react-native-style-buddy";

const { styles } = createStyleBuddy({
  extendTheme: {
    colors: { primary: "#ff00ff" }
  }
});

// The default colors are available, alongside your added colors.
styles("color:red-300", "bg:primary");

Adding style handlers

Style Buddy allows you to add your own custom style handlers, so you can break free from the default handlers and add your own if you so desire.

Each custom handler of the form f: x => y will generate a set of style names of the form f:x; each handler of the form f: () => y will generate a single style name f.

import { createStyleBuddy } from "react-native-style-buddy";

const { styles } = createStyleBuddy({
  // Add some extra handlers
  extraHandlers: {
    size: (x: "small" | "big") => ({ width: x === "small" ? 8 : 64 }),
    foo: () => ({ backgroundColor: "brown" })
  }
});

// You now have some additional style names
styles("size:small", "size:large", "foo");

Recommended Usage

We recommend creating a single Style Buddy instance for your entire application. This helps with consistency and caching. You might create a file with all-things Style Buddy, and export what you need from there.

// styles.ts
import { createStyleBuddy } from "react-native-style-buddy";
import { View, Text } from "react-native";

// Export helpers
export const { styles, useStyles, makeStyledComponent } = createStyleBuddy({ /* ... */ });

// Export some styled components for easy-user
export const StyledView = makeStyledComponent(View);
export const StyledText = makeStyledComponent(Text);

Then, throughout your app you can import style helpers from this file.

// MySweetComponent.tsx
import * as React from "react";
import { StyledView, StyledText } from "./styles";

export const MySweetComponent = () => {
  return (
    <StyledView
      classes={["flex:1", "bg:red-100"]}
      darkClasses={["bg:red-800"]}
    >
      <StyledText
        classes={["text:3xl", "color:gray-800"]}
        darkClasses={["color:gray-200"]}
      >
        Hello world!
      </StyledText>
    </StyledView>
  )
};

And don't forget to wrap your application in a StyleProvider instance.

Additional Guides