React Native Components

@vellira-ui/react-native provides native components for iOS and Android with shared Vellira tokens, TypeScript contracts, and platform-appropriate interaction APIs.

Installation

pnpm add @vellira-ui/react-native

The package expects react and react-native as peer dependencies.

Components

ButtonPressable actions, loading, icons, badges, and semantic colors.InputNative text input with validation, icons, masks, and clear actions.CheckboxBoolean and mixed selection with native accessibility.RadioGroupVisible single-selection groups with controlled state.SelectSheet, modal, or popover selection for compact option lists.FormFieldPresentational field layout for custom native controls.DropdownContextual native action menus.TabsCompound tab navigation for native screens.PopoverAnchored interactive content with native positioning and compound sections.TooltipFloating helper text around native targets.PortalShared primitive for explicit overlay composition.ModalCompound native dialogs with overlays and actions.ThemeProviderLight, dark, and high-contrast native themes.

Basic Example

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

export function Example() {
  const [email, setEmail] = useState('');
  const [accepted, setAccepted] = useState(false);

  return (
    <View style={{ gap: 16 }}>
      <Input label='Email' value={email} onValueChange={setEmail} />

      <Checkbox
        label='Accept terms'
        description='Required to create an account.'
        checked={accepted}
        onCheckedChange={setAccepted}
      />

      <Button onPress={() => submit({ email, accepted })}>Continue</Button>
    </View>
  );
}

Native API Conventions

• Use onPress for actions.
• Use style, textStyle, inputStyle, and other React Native style props.
• Use accessibilityLabel for icon-only or visually unlabeled controls.
• Controlled components expose value or checked; uncontrolled components use defaultValue or defaultChecked.
• Validation belongs to the app. Components render error and invalid states.
• Verify important flows with iOS VoiceOver and Android TalkBack on real devices.

Development

pnpm --filter @vellira-ui/react-native build
pnpm --filter @vellira-ui/react-native test
pnpm --filter native-storybook start