Usage

Configure a directional flick.

tsx
// Configure a directional flick.
import { Box, fling, haptics, type FlingOptions } from 'kuito';

function swipeTo(direction: 'left' | 'right', action: () => void): FlingOptions {
  return {
    direction,
    hitArea: { horizontal: 20 },
    onEnd: (_, success) => {
      if (!success) return;
      void haptics.impact('light');
      action();
    },
  };
}

<Box
  gestures={[
    fling(swipeTo('left', () => console.log('archive'))),
    fling(swipeTo('right', () => console.log('pin'))),
  ]}
/>;

Type declaration

ts
export interface FlingOptions extends Common, Callbacks<FlingEvent, FlingEvent> {
  /** Where it may go; right by default. */
  direction?: FlingDirection | readonly FlingDirection[];
}

Members 6

NameTypeRequiredDescription
directionFlingDirection | readonly FlingDirection[]NoWhere it may go; right by default.
disabledbooleanNoIgnores touches, like a disabled Pressable.
hitAreaHitAreaNoInsets of the area that takes touches: one for every edge, or by edge.
onStart(event: PositionEvent) => voidNoIt activated.
onChange(event: PositionEvent) => voidNoIt moved, with the change since the last move.
onEnd(event: PositionEvent, success: boolean) => voidNoIt ended after activating: success is false when it was cancelled.
onStart — method signatures

Signatures

ts
(event: PositionEvent): void

Parameters

NameTypeRequiredDescription
eventPositionEventYes—

Returns

void

onChange — method signatures

Signatures

ts
(event: PositionEvent): void

Parameters

NameTypeRequiredDescription
eventPositionEventYes—

Returns

void

onEnd — method signatures

Signatures

ts
(event: PositionEvent, success: boolean): void

Parameters

NameTypeRequiredDescription
eventPositionEventYes—
successbooleanYes—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.