FormActions — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add form-actions

Or install the whole package and import it

pnpm add orn-ui
import { FormActions } from 'orn-ui/form-actions';

Depends on:core (theme + icons)button

Usage

when to use — The action bar at the bottom of a form or a modal — keeps the order and spacing consistent.
primaryLabel — If omitted, only the secondary button renders (a Cancel-only footer).
primaryLoading / primaryDisabled — `primaryLoading` while the submit runs, `primaryDisabled` while the form is invalid.

Demo clip not recorded yet — see MEDIA.md

Variants

Primary + secondary

<FormActions primaryLabel="Save" onPrimaryPress={() => {}} onSecondaryPress={() => {}} />

Secondary only

<FormActions secondaryLabel="Close" onSecondaryPress={() => {}} />

Primary disabled

<FormActions primaryLabel="Save" onPrimaryPress={() => {}} primaryDisabled onSecondaryPress={() => {}} />

Primary loading

<FormActions primaryLabel="Saving..." onPrimaryPress={() => {}} primaryLoading onSecondaryPress={() => {}} />

Full demo source

const variants: VariantDef[] = [
  { label: 'Primary + secondary', content: <FormActions primaryLabel="Save" onPrimaryPress={() => {}} onSecondaryPress={() => {}} /> },
  { label: 'Secondary only', content: <FormActions secondaryLabel="Close" onSecondaryPress={() => {}} /> },
  {
    label: 'Primary disabled',
    content: <FormActions primaryLabel="Save" onPrimaryPress={() => {}} primaryDisabled onSecondaryPress={() => {}} />,
  },
  {
    label: 'Primary loading',
    content: <FormActions primaryLabel="Saving..." onPrimaryPress={() => {}} primaryLoading onSecondaryPress={() => {}} />,
  },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`primaryLabel?`	`string`	—	If omitted, only the secondary button is shown.
`onPrimaryPress?`	`() => void`	—	—
`primaryDisabled?`	`boolean`	false	—
`primaryLoading?`	`boolean`	false	—
`primaryLeftIconName?`	`IconName`	—	—
`secondaryLabel?`	`string`	—	—
`onSecondaryPress`	`() => void`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—