@snowball-ui/react-native

Experimental React Native runtime for Snowball UI.

This package shares Snowball UI foundation contracts and theme values, but implements components with React Native primitives.

Install

pnpm add @snowball-ui/react-native react react-native

Install react-native-svg as well when using components that render SVG primitives, such as Checkbox, SearchField, ListRow, icons, charts, or keypads. The package declares it as an optional peer dependency so apps can decide when to include it.

Basic Usage

import {
  Button,
  SnowballNativeThemeProvider,
  TextField,
} from '@snowball-ui/react-native';

export function App() {
  return (
    <SnowballNativeThemeProvider>
      <TextField label="Email" prefix="@" placeholder="[email protected]" />
      <Button onPress={() => {}}>Continue</Button>
    </SnowballNativeThemeProvider>
  );
}

TextField

TextField supports the shared Snowball input variants (box, line, big, hero), sizes, labels, helper/error text, disabled/read-only states, and native theme values. React Native also exposes parity helpers from the same compound component:

import { TextField } from '@snowball-ui/react-native';

export function AccountFields() {
  return (
    <>
      <TextField
        label="Handle"
        prefix="@"
        suffix=".snow"
        placeholder="username"
      />
      <TextField.Clearable label="Search" defaultValue="snowball" />
      <TextField.Password label="Password" />
      <TextField.Button label="Bank" placeholder="Select bank" onPress={() => {}} />
    </>
  );
}

Use prefix, suffix, and right for adornments. Use TextField.Clearable for editable clear actions, TextField.Password for visibility toggles, and TextField.Button for input-shaped selection controls.

Theme Values

React Native does not use CSS variables. Components read semantic color values from theme.semantic, and consumers can use theme.styleTokens for numeric radius, spacing, typography, and motion values. Import these runtime helpers from the public package entrypoint.

import { Text, View } from 'react-native';
import {
  resolveShadow,
  useSnowballNativeTheme,
} from '@snowball-ui/react-native';

function Panel() {
  const theme = useSnowballNativeTheme();

  return (
    <View
      style={{
        backgroundColor: theme.semantic.bg.surface.default,
        borderRadius: theme.styleTokens.radius.lg,
        padding: theme.styleTokens.spacing[5],
        ...resolveShadow(theme.semantic.shadow.subtle),
      }}
    >
      <Text style={{ color: theme.semantic.fg.text.primary }}>
        Shared Snowball theme
      </Text>
    </View>
  );
}

Semantic tokens describe theme-dependent intent such as surface, text, border, action, status, and shadow roles. Use theme.semantic for colors and semantic shadow strings, and use theme.styleTokens for cross-platform numeric values and themeable component effects such as dialog overlay opacity and Highlight spotlight opacity.

const dialogOverlayEffect =
  theme.styleTokens.effect.dialog.native.overlay.strong;
const highlightOverlayEffect =
  theme.styleTokens.effect.highlight.native.overlay;

Use theme.styleTokens.effect.field.native.focusRing for custom native input-like focus rings. Use nativeEffectStyleTokens only for platform effect recipes that are not semantic theme roles, such as exact component shadow recipes. Import it from the public package entrypoint when custom native surfaces need to share those recipes.

import { nativeEffectStyleTokens } from '@snowball-ui/react-native';

const fieldFocusRingEffect = theme.styleTokens.effect.field.native.focusRing;
const menuShadowEffect = nativeEffectStyleTokens.shadow.menuDropdown;

Status

Experimental. Current supported components:

• Agreement
• AgreementV3
• AgreementV4
• AlertDialog
• Asset
• Badge
• BarChart
• BoardRow
• Border
• BottomCTA
• FixedBottomCTA
• BottomInfo
• BottomSheet
• Bubble
• Button
• Card
• Checkbox
• ConfirmDialog
• Dialog
• GridList
• Highlight
• IconButton
• Keypad
• AlphabetKeypad
• NumberKeypad
• FullSecureKeypad
• ListFooter
• ListHeader
• ListRow
• ListRowLegacy
• Loader
• Menu
• Modal
• NumericSpinner
• Paragraph
• Post
• ProgressBar
• ProgressStepper
• Rating
• Result
• SearchField
• SegmentedControl
• Skeleton
• Slider
• SplitTextField
• Stepper
• StepperRow
• Switch
• Tab
• Tabs
• TableRow
• TextArea
• TextField
• TextButton
• Toast
• Tooltip
• Top

License

MIT