@girumtech/gs-design-system-native

React Native entry point for GsDesignSystem, a TypeScript design system built with Tamagui. It exports shared components and themes, native SVG icons, and curated React Native-compatible layout primitives.

Requirements

• React 19 or newer
• React Native 0.81 or newer
• Tamagui 2.7
• React Native SVG 15 or newer

Installation

npm install @girumtech/gs-design-system-native tamagui react-native-svg

For a bare React Native iOS application, install CocoaPods after adding the dependencies:

cd ios
pod install
cd ..

Application setup

Add GsProvider once near the application root. It supplies the Tamagui configuration, tokens, and default theme.

// App.tsx
import { Button, GsProvider, ScrollView, Text, YStack } from '@girumtech/gs-design-system-native'

export default function App() {
  return (
    <GsProvider defaultTheme="blue">
      <ScrollView backgroundColor="$background">
        <YStack padding="$4" gap="$4">
          <Text variant="title">My application</Text>
          <Text tone="muted">Built with GsDesignSystem.</Text>
          <Button onPress={() => console.log('Pressed')}>Continue</Button>
        </YStack>
      </ScrollView>
    </GsProvider>
  )
}

Available themes are red, red_dark, blue, and blue_dark.

GsProvider does not have to live directly in App.tsx, but it should appear once above components that use theme tokens. It can be placed in a dedicated application providers component or in the registered root component.

Components

import { Button, Field, Text, XStack, YStack } from '@girumtech/gs-design-system-native'

export function ProfileForm() {
  return (
    <YStack padding="$4" gap="$4" backgroundColor="$background">
      <Text variant="title">Profile</Text>

      <Field
        id="display-name"
        label="Display name"
        placeholder="Your name"
        helperText="This name is visible to your team."
      />

      <XStack gap="$3">
        <Button onPress={() => console.log('Saved')}>Save</Button>
        <Button intent="secondary">Cancel</Button>
      </XStack>
    </YStack>
  )
}

Buttons use the active theme accent for their border. Input / Field rest on the neutral borderSubtle token (a soft grey in light themes, near-white in dark ones), switch to the accent on focus, and to danger when errorText is set. Override any of these with the standard Tamagui borderColor prop:

<Button borderColor="#7C3AED">Custom border</Button>
<Field id="code" label="Code" borderColor="#7C3AED" />

Neutral tokens

Every theme also carries brand-neutral tokens for chrome that should not read as accent: borderSubtle (hairlines), surfaceMuted (filled/pressed surfaces), iconMuted and textMuted (de-emphasized icons and text). Reach for these instead of hard-coding greys.

Switching themes

Use the exported Theme component when the selected theme changes at runtime:

import { useState } from 'react'
import {
  Button,
  GsProvider,
  Text,
  Theme,
  YStack,
  type GsThemeName,
} from '@girumtech/gs-design-system-native'

export function ThemeExample() {
  const [theme, setTheme] = useState<GsThemeName>('blue')

  return (
    <GsProvider defaultTheme="blue">
      <Theme name={theme}>
        <YStack flex={1} padding="$4" gap="$4" backgroundColor="$background">
          <Text variant="title">Current theme: {theme}</Text>
          <Button onPress={() => setTheme('red')}>Use red</Button>
          <Button onPress={() => setTheme('blue_dark')}>Use dark blue</Button>
        </YStack>
      </Theme>
    </GsProvider>
  )
}

Icons

Built-in icons and custom path icons share the same native SVG API:

import { Icon, NamedIcon, type IconPath } from '@girumtech/gs-design-system-native'

const spark: readonly IconPath[] = [
  {
    d: 'M12 2 14.5 9.5 22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5L12 2Z',
    fill: 'currentColor',
  },
]

export function Icons() {
  return (
    <>
      <NamedIcon name="Heart" size={28} color="#FC2B2B" label="Favorite" />
      <Icon paths={spark} size={32} color="#2323F7" label="Spark" />
    </>
  )
}

Decorative icons may omit label; meaningful icons should provide one for accessibility.

Built-in icon names

NamedIcon's name prop is a PascalCase IconName: ArrowRight, Check, Heart, Plus, Menu, User, ChevronRight, ChevronLeft, Logout, Close, Layers, Box, Edit, Eye, EyeOff, Moon, Sun, Coin, MoreVertical, Trash. Need something outside that set? Pass your own paths to Icon rather than keeping a one-off icon set in the consuming app.

Exports

The package exports GsProvider, Theme, Button, Input, Field, Text, Icon, NamedIcon, tokens, themes, and the curated Image, ScrollView, Separator, View, XStack, YStack, and ZStack primitives.