Command

Command provides a command palette modal for fast navigation and actions.

Usage

CommandExample.tsx

import { useState } from 'react';
import { Command, Button } from '@masumdev/rn-ui';

export function CommandExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onPress={() => setOpen(true)}>Open Command Palette</Button>
      <Command
        visible={open}
        onClose={() => setOpen(false)}
        title="Navigation Commands"
        items={[
          { value: 'theme', label: 'Theme Tokens', description: 'Colors, radius, typography' },
          { value: 'toast', label: 'Toast Notifications', description: 'Feedback alerts' },
        ]}
        onSelect={(value) => {
          console.log('Selected command:', value);
          setOpen(false);
        }}
      />
    </>
  );
}

Props API

Prop	Type	Default	Description
visible	boolean	—	Palette modal visibility.
title	string	—	Command palette heading.
items	CommandItem[]	—	Array of searchable command item objects.
onSelect	(value: string) => void	—	Callback when command item is selected.
onClose	() => void	—	Callback when palette is closed.