Skip to main content

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>;

Configuration​

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 components​

  • 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 usage​

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