# Breathing Exercise

Canonical page: https://docs.ovok.com/native-sdk/guide/components/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.

```tsx
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 [#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 [#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 [#direct-provider-usage]

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