Breathing Exercise

The breathing module provides a fixed three-phase timeline driven by React Native Reanimated. The UI is composable, but the SDK owns the timer and the bundled Lottie animation.

import { BreathingExercise } from "@ovok/native/breathing-exercise";

<BreathingExercise
  methods={[
    { type: "inhale", duration: 4 },
    { type: "hold", duration: 4 },
    { type: "exhale", duration: 4 },
  ]}
  repeat={5}
  onFinish={() => onFinished()}
>
  <BreathingExercise.ProgressBar />
  <BreathingExercise.AnimationWrapper>
    <BreathingExercise.Animation />
    <BreathingExercise.MethodTypeIcon />
  </BreathingExercise.AnimationWrapper>
  <BreathingExercise.Info>
    <BreathingExercise.MethodName />
    <BreathingExercise.RemainingTime />
  </BreathingExercise.Info>
</BreathingExercise>;

ConfigurationCopy Anchor Link

methods is a three-item tuple in the order inhale, hold, exhale. Each duration is in seconds. repeat is the number of complete rounds. onFinish is called when the Reanimated progress reaches 1 from the animation worklet; it is not wrapped in runOnJS. Use runOnJS inside the worklet-facing callback for JavaScript-only effects such as navigation.

The root also accepts React Native ViewProps. Children are optional in the type, so the component can be used as a provider/container for a custom consumer tree.

Compound componentsCopy Anchor Link

• ProgressBar: consumes the exercise progress and forwards the remaining progress-bar props except progress.
• AnimationWrapper: a View container. MethodTypeIcon is positioned over this wrapper, so render it there when using the bundled layout.
• Animation: an animated lottie-react-native view using the SDK's bundled breathing animation. source, animatedProps, and autoPlay are controlled by the SDK; the public type omits source.
• Info: a View with a maximum height of 30% of the current window height.
• MethodTypeIcon: renders the inhale, hold, or exhale icon for the current phase. Its icon color is currently fixed to black; it has no color prop.
• MethodName: localized with breathing-exercise.method.<methodType> and styled as a bold 20px label.
• RemainingTime: displays the current phase's remaining time and is styled as a bold 20px label.

All phase text and accessibility labels are caller-owned except for the MethodName translation lookup. Add your own translations for the supported languages.

Direct provider usageCopy Anchor Link

Use BreathingExerciseProvider when you need the timing context without the compound root's View. Use useBreathingExercise only below that provider.