FileInputTrigger

Beta

A file-upload style trigger with dashed border and centered plus icon, designed for custom file picker implementations.

Installation

npm install @xaui/native

Import

import { FileInputTrigger } from '@xaui/native/input-trigger'

Basic Usage

Minimal example showing the component with its default configuration.

import { FileInputTrigger } from '@xaui/native/input-trigger'

export function Example() {
  return <FileInputTrigger />
}

Basic

import { FileInputTrigger } from '@xaui/native/input-trigger'

export function BasicExample() {
  return (
    <FileInputTrigger
      label="Attachments"
      placeholder="Tap to choose files"
      onPress={() => {}}
    />
  )
}

Selected Preview

import { Image } from 'react-native'
import { FileInputTrigger } from '@xaui/native/input-trigger'

export function SelectedPreviewExample() {
  return (
    <FileInputTrigger
      label="Avatar"
      radius="full"
      selectedContent={
        <Image
          source={{ uri: 'https://picsum.photos/160' }}
          style={{ width: 96, height: 96, borderRadius: 48 }}
        />
      }
      onPress={() => {}}
    />
  )
}

Variants

import { FileInputTrigger } from '@xaui/native/input-trigger'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={12}>
      <FileInputTrigger label="Colored" variant="colored" onPress={() => {}} />
      <FileInputTrigger label="Light" variant="light" onPress={() => {}} />
      <FileInputTrigger label="Bordered" variant="bordered" onPress={() => {}} />
      <FileInputTrigger label="Underlined" variant="underlined" onPress={() => {}} />
    </Column>
  )
}