@sncrr/styled-native

🔹@sncrr/styled-native is a lightweight utility for React Native and React Native Web that lets you create styled components with variants, default variants, and style composition. It’s designed around the style prop, making it framework-agnostic and compatible with libraries like react-native-paper and react-native-web.

✨ Features

• 🎨 Define reusable styled components
• 🔧 Add variants (like size, color, weight)
• ⚡ Supports default variants
• 📦 Works with React Native and React Native Web
• 🔑 Fully typed for TypeScript

🚀 Install

npm install @sncrr/styled-native
# or
yarn add @sncrr/styled-native
# or
pnpm add @sncrr/styled-native
# or
bun add @sncrr/styled-native

📖 Usage

import { styled } from "@sncrr/styled-native";
import { Text } from "react-native";

const StyledText = styled(Text)(
  { fontSize: 16, color: "black" },
  {
    variants: {
      weight: {
        normal: { fontWeight: "400" },
        bold: { fontWeight: "700" },
      },
      color: {
        primary: { color: "blue" },
        danger: { color: "red" },
      },
    },
    defaultVariants: {
      weight: "normal",
    },
  }
);

export default function App() {
  return (
    <>
      <StyledText>Default text</StyledText>
      <StyledText weight="bold" color="danger">
        Bold red text
      </StyledText>
    </>
  );
}

⚙️ API

styled(Component)(baseStyle, options?)

Parameters

• Component - Any React Native component (e.g., Text, View, Image).
• baseStyle - A base style object.
• options (optional)
  • variants - Define multiple variant groups (e.g., size, color).
  • defaultVariants - Define default values for variants.

Returns

A new styled component with variant props and style merging.

🛠 Example with multiple variants

const Button = styled(Pressable)(
  {
    padding: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  {
    variants: {
      variant: {
        solid: { backgroundColor: "blue" },
        outline: { borderWidth: 2, borderColor: "blue" },
      },
      size: {
        sm: { padding: 8 },
        lg: { padding: 16 },
      },
    },
    defaultVariants: {
      variant: "solid",
      size: "sm",
    },
  }
);