Installation

Installation guide for our application.

Getting started

Native Variants combines the power of React Native's StyleSheet with a first-class variant API for dynamic styling.

Setup React Native

Native Variants requires you to have a React Native project set up. If you haven't set up React Native yet, you can follow the official React Native Getting Started guide.

Installation

To use Native Variants in your React Native project, install it as a dependency:

bash npm i native-variants

Usage

import { nv, type VariantProps } from "native-variants";
import React from "react";
import { Text, TouchableOpacity } from "react-native";

const buttonVariants = nv({
  slots: ["root", "text"],
  base: {
    root: {
      paddingHorizontal: 16,
      paddingVertical: 12,
    },
    text: {
      color: "#ffffff",
      textAlign: "center",
    },
  },
  variants: {
    variant: {
      solid: {
        root: {
          backgroundColor: "#ff0006",
        },
        text: {
          color: "#ffffff",
        },
      },
      ghost: {
        root: {
          backgroundColor: "transparent",
        },
        text: {
          color: "#ff0006",
        },
      },
    },
  },
  defaultVariants: {
    variant: "solid",
  },
  compoundVariants: [
    {
      variant: "ghost",
      css: {
        root: {
          borderWidth: 1,
          borderColor: "#fff006",
        },
      },
    },
  ],
});

export interface ButtonProps
  extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
    VariantProps<typeof buttonVariants> {}

export const Button = React.forwardRef<
  React.ComponentRef<typeof TouchableOpacity>,
  ButtonProps
>(({ children, variant, ...props }, ref) => {
  const { root, text } = buttonVariants({ variant });

  return (
    <TouchableOpacity {...props} ref={ref} style={root}>
      <Text style={text}>{children}</Text>
    </TouchableOpacity>
  );
});

Button.displayName = "Button";