GuidesComponentsBreathing Exercise

Breathing Exercise Types

Public TypeScript types for the breathing exercise module

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

The public barrel explicitly exports BreathingExerciseContextType. The component props and animation prop shapes are used to type the exported components but are not separate named exports from the module. The configuration type is also internal.

Configuration shape

type BreathingPattern = [
  { type: "inhale"; duration: number },
  { type: "hold"; duration: number },
  { type: "exhale"; duration: number },
];

type BreathingExercise = {
  methods: BreathingPattern;
  repeat: number;
  onFinish?: () => void;
};

The tuple is exactly three phases. Durations and repeat counts are numbers; the implementation does not document additional runtime validation, so validate user-provided values in the integrating app.

Component props

BreathingExerciseProps is ViewProps & BreathingExercise. BreathingExerciseAnimationProps is Omit<LottieViewProps, "source">; the component always supplies its bundled source and animated progress.

Context value

BreathingExerciseContextType contains the configuration and live state:

type BreathingExerciseContextType = BreathingExercise & {
  progress: SharedValue<number>;
  roundData: SharedValue<{
    method: BreathingExercise["methods"][number];
    animationProgress: number;
    remainingTime: number;
  }>;
  remainingTime: number;
  methodType: BreathingExercise["methods"][number]["type"];
};

progress and roundData are Reanimated shared values. Read them inside worklets for animated styles; use the React remainingTime and methodType values for ordinary text rendering.

Last updated on

On this page