Skip to main content
Slatico logo
Monorepo Release Notice (v0.1.0 · Workspace Monorepo Release): Packages are verified in the open-source Slatico monorepo CI pipeline and prepared for upcoming public registry publishing (npm, pub.dev, Maven Central, and Swift Package Index). Clone github.com/infitusofficial/slatico to consume packages via workspace or local path today.
@slatico/react-native · v0.1.0

React Native & Expo Integration Guide

@slatico/react-native renders all 189 Slatico vector variants (27 families × 7 styles) natively on iOS and Android via react-native-svg, resolving Duotone and Color layers directly in JavaScript without web-only CSS custom properties.

1. Installation

Terminal (npm / pnpm / yarn / Expo)
npm install @slatico/react-native react-native-svg
# or
pnpm add @slatico/react-native react-native-svg
# or
yarn add @slatico/react-native react-native-svg

# In Expo projects, ensure the compatible react-native-svg binary is installed:
npx expo install react-native-svg

2. Monochrome, Duotone & Dual-Color Usage

MobileNavigation.tsx
import { View } from "react-native";
import {
  BellIcon,
  ShieldCheckDuotoneIcon,
  WalletColorIcon
} from "@slatico/react-native";
// Or import directly from a per-icon subpath for Metro tree-shaking:
import { ArrowUpRightBoldIcon } from "@slatico/react-native/icons/arrow-up-right";

export function MobileNavigation() {
  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 16 }}>
      {/* 1. Regular monochrome icon (defaults to size=24, color="#09090B") */}
      <BellIcon variant="regular" size={24} color="#010520" />

      {/* 2. Explicit style component with customized size */}
      <ArrowUpRightBoldIcon size={32} color="#010520" />

      {/* 3. Duotone icon with primary color, secondaryColor & secondaryOpacity */}
      <ShieldCheckDuotoneIcon
        size={28}
        color="#010520"
        secondaryColor="#FF6040"
        secondaryOpacity={0.25}
        title="Security Verified"
      />

      {/* 4. Color icon with default brand palette (#FF6040 primary + #000000 secondary) */}
      <WalletColorIcon size={28} />

      {/* 5. Color icon with two custom colors (color + secondaryColor) */}
      <BellIcon
        variant="color"
        size={28}
        color="#FF6040"
        secondaryColor="#010520"
        title="Notifications"
      />
    </View>
  );
}

3. Complete Props Reference (SlaticoNativeIconProps)

PropTypeDefaultDescription
variantSlaticoStyle"regular"Visual style (thin, light, regular, bold, fill, duotone, color).
sizenumber | string24Width and height in density-independent pixels (dp / pt).
colorstring"#09090B" ("#FF6040" in color)Primary foreground color for monochrome, duotone, and color variants.
secondaryColorstringcolor ("#000000" in color)Secondary tone color for duotone and color variants.
secondaryOpacitynumber | string0.22Opacity of the secondary tone layer in duotone icons.
title / accessibilityLabelstringundefinedVoiceOver / TalkBack screen reader label. Sets accessible={true} and accessibilityRole="image"; when omitted, hides the icon from accessibility trees.