@girumtech/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/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/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/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 and inputs use the active theme accent for their border by default. Override it with the standard Tamagui borderColor prop:

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

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/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/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.

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.