Core Components

VibeFast includes a set of core UI components in src/components/ui/ that are used throughout the application. These components are built with NativeWind for easy styling and are designed for consistency and reusability.

Button

The Button component is highly versatile and supports multiple styles and states.

• Location: src/components/ui/form/button.tsx
• Key Props:
  • variant: default, secondary, outline, destructive, ghost
  • size: default, lg, sm
  • loading: Shows an activity indicator.
  • disabled: Disables the button.

Example Usage:

import { Button } from '@/components/ui';

<Button
  label="Click Me"
  onPress={() => console.log('Pressed!')}
  variant="secondary"
  size="lg"
/>

Input & FloatingTextInput

The starter includes two main input components. FloatingTextInput is the recommended component for forms as it provides a modern, user-friendly experience.

• Location: src/components/ui/form/floating-text-input.tsx
• Key Feature: It's a controlled component designed to integrate seamlessly with react-hook-form.

Example Usage with React Hook Form:

import { useForm } from 'react-hook-form';
import { ControlledFloatingInput, Button } from '@/components/ui';

function MyForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <>
      <ControlledFloatingInput
        control={control}
        name="email"
        label="Email"
        keyboardType="email-address"
      />
      <Button label="Submit" onPress={handleSubmit(onSubmit)} />
    </>
  );
}

Select

The Select component provides a dropdown menu that uses a native bottom sheet for selecting options, making it ideal for mobile.

• Location: src/components/ui/form/select.tsx
• Key Props:
  • options: An array of objects with label and value keys.
  • onSelect: A callback function that returns the selected value.

Example Usage:

import { Select } from '@/components/ui';

const options = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

<Select
  label="Choose an option"
  options={options}
  onSelect={(value) => console.log(value)}
/>

Checkbox, Radio & Switch

These selection components are all located in a single file and provide familiar UI controls.

• Location: src/components/ui/form/checkbox.tsx
• Key Props:
  • checked: A boolean to control the component's state.
  • onChange: A function that is called with the new boolean state.

Example Usage:

import { Checkbox, Radio, Switch } from '@/components/ui';
import { useState } from 'react';

function SelectionControls() {
  const [isChecked, setChecked] = useState(false);
  const [isSwitched, setSwitched] = useState(false);

  return (
    <>
      <Checkbox
        label="Accept Terms"
        checked={isChecked}
        onChange={setChecked}
      />
      <Switch
        label="Enable Notifications"
        checked={isSwitched}
        onChange={setSwitched}
      />
    </>
  );
}