GuidesComponentsBreathing Exercise

BreathingExerciseProvider

Provider for the breathing exercise timeline

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

BreathingExerciseProvider owns the Reanimated timeline and exposes it through useBreathingExercise. It accepts the same methods, repeat, and onFinish configuration as BreathingExercise, plus optional children.

import { BreathingExerciseProvider, useBreathingExercise } from "@ovok/native/breathing-exercise";

function CustomControls() {
  const { methodType, remainingTime } = useBreathingExercise();
  return <Text>{methodType}: {Math.ceil(remainingTime)}</Text>;
}

<BreathingExerciseProvider
  methods={[
    { type: "inhale", duration: 4 },
    { type: "hold", duration: 4 },
    { type: "exhale", duration: 4 },
  ]}
  repeat={5}
  onFinish={handleFinish}
>
  <CustomControls />
</BreathingExerciseProvider>;

The provider calculates the round duration, animates overall progress from 0 to 1 with linear timing, derives the current phase and remaining time, and calls onFinish when complete. It does not pause, seek, restart, persist, or expose a ref-based control API. Mounting a new provider starts a new timeline.

methods must be the fixed inhale/hold/exhale tuple. onFinish is invoked from a Reanimated worklet when progress reaches 1; it is not automatically marshalled to the JavaScript thread. Wrap JavaScript-only work such as navigation in runOnJS, and make the callback safe to invoke once per completed mount.

Last updated on