GuidesComponentsBreathing Exercise

useBreathingExercise

Read the active breathing exercise timeline

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

useBreathingExercise() reads the nearest BreathingExerciseProvider context.

const { methodType, remainingTime, progress, roundData } =
  useBreathingExercise();

It returns BreathingExerciseContextType:

  • methods, repeat, and onFinish: the active configuration.
  • progress: a Reanimated SharedValue<number> from 0 to 1.
  • roundData: a Reanimated shared value containing method, animationProgress, and phase remainingTime.
  • remainingTime: the current phase's time remaining as React state, rounded up by the provider's reaction.
  • methodType: "inhale", "hold", or "exhale" for the current phase.

Use shared values inside Reanimated worklets. For normal React rendering, use methodType and remainingTime rather than reading .value during render.

The hook throws useBreathingExercise must be used within a BreathingExercise component when called outside the provider. The BreathingExercise compound component mounts the provider automatically; BreathingExerciseProvider is available for a custom consumer tree.

Last updated on