native-recipe

@lynstack/native-recipe maps a component’s variants to its React Native styles. It has three functions:

createStyleRecipe creates a recipe for the style of one element.
createSlotStyleRecipe creates a slot recipe for the styles of several elements, such as a button’s container and label.
createThemedRecipes returns both, for recipes whose styles are built from the tokens of a theme.

import { createStyleRecipe } from "@lynstack/native-recipe";

export const badge = createStyleRecipe({
  base: { alignSelf: "flex-start", borderRadius: 999, paddingHorizontal: 8 },
  variants: {
    tone: {
      neutral: { backgroundColor: "#f3f4f6" },
      danger: { backgroundColor: "#fee2e2" },
    },
    size: { sm: { height: 20 }, md: { height: 24 } },
  },
  defaultVariants: { size: "md" },
});

badge({ tone: "neutral" })→ {    alignSelf: "flex-start",    borderRadius: 999,    paddingHorizontal: 8,    backgroundColor: "#f3f4f6",    height: 24,  }

badge({ tone: "danger" }) === badge({ tone: "danger" }); // => true

What it gives you

Stable styles. A recipe builds the style of each selection once and returns the same frozen object for it. The style prop keeps its identity between renders, so React skips comparing it and a memoized child skips rendering (see How it works).
Type-safe. Every style is checked against the styles of React Native, as in StyleSheet.create, and the result keeps the types of the properties the config declares: a text style passed to a View is a type error. Variant names, options, and slots are inferred from the config, and a variant without a default is required.
Themes. Build styles from the tokens of a design system, and switch between light and dark, or any theme, without declaring each theme’s styles in every recipe (see Themes and design tokens).
Fast. A call with the cache is a lookup, about 5 times as fast as merging the styles again (see Performance).
Small. ES modules only, with no code from React Native at runtime. Its one dependency is @lynstack/recipe, the engine it is built on.

When to use it

Use it to style React Native components whose styles depend on their props or state. To style components on the web with class names, use @lynstack/class-recipe; to map variants to other values, use @lynstack/recipe.

Next steps

Quick start styles a badge and a button, and types their props.
How it works explains the cache, the order of styles, and stable styles.
Themes and design tokens builds a light and a dark theme with a theme provider.
Agent skill teaches coding agents to keep styles stable and to build them from theme tokens.