Native

@romanbakurov/vellira-native is the React Native renderer for Vellira. It uses React Native primitives and StyleSheet, but follows the same public component language as the web package.

Install

pnpm add @romanbakurov/vellira-native

Peer dependencies:

pnpm add react react-native

Example

import {
  Button,
  Checkbox,
  Input,
  RadioGroup,
} from '@romanbakurov/vellira-native';
import { View } from 'react-native';

export function PreferencesScreen() {
  return (
    <View style={{ gap: 16, padding: 24 }}>
      <Input label='Email' placeholder='name@example.com' />
      <RadioGroup
        label='Theme'
        options={[
          { label: 'System', value: 'system' },
          { label: 'Light', value: 'light' },
          { label: 'Dark', value: 'dark' },
        ]}
      />
      <Checkbox label='Send product updates' />
      <Button variant='primary'>Apply</Button>
    </View>
  );
}

Storybook and Playground

Native stories live next to components and are consumed by apps/native-storybook.

pnpm --filter native-storybook start
pnpm --filter native-storybook ios
pnpm --filter native-storybook android

Use the Expo playground for manual checks while building product flows.

pnpm --filter native-playground start

Testing

pnpm --filter @romanbakurov/vellira-native test

The package uses Vitest with a lightweight React Native mock to validate state, callbacks, accessibility props, and conditional rendering without requiring a simulator.