expo-orb 0.1.0 → 0.2.2

package/README.md

@@ -8,7 +8,7 @@ Inspired by and iOS implementation from [metasidd/Orb](https://github.com/metasi
 
 | iOS | Android |
 |:---:|:-------:|
-| ![iOS Demo](https://raw.githubusercontent.com/enso-works/expo-orb/main/docs/demo-ios.gif) | ![Android Demo](https://raw.githubusercontent.com/enso-works/expo-orb/main/docs/demo-android.gif) |
+| ![iOS Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/demo-ios.gif) | ![Android Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/demo-android.gif) |
 
 ## Features
 
@@ -124,6 +124,214 @@ export default function App() {
 }
 ```
 
+---
+
+## Breathing Exercise Component
+
+A guided breathing exercise component with morphing blob animation, progress ring, and text cues. Supports custom breathing patterns and built-in presets.
+
+### Breathing Demo
+
+| iOS | Android |
+|:---:|:-------:|
+| ![iOS Breathing Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/breathing-ios.gif) | ![Android Breathing Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/breathing-android.gif) |
+
+### Basic Usage
+
+```tsx
+import {
+  ExpoBreathingExerciseView,
+  startBreathingExercise,
+  stopBreathingExercise,
+  getBreathingPreset,
+} from 'expo-orb';
+
+function BreathingScreen() {
+  const handleStart = () => {
+    // Use a built-in preset
+    startBreathingExercise(getBreathingPreset('box'));
+  };
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <ExpoBreathingExerciseView
+        style={{ width: 300, height: 300 }}
+        blobColors={['#7c3aed', '#3b82f6', '#ec4899']}
+        showProgressRing={true}
+        showTextCue={true}
+        onPhaseChange={(e) => console.log('Phase:', e.nativeEvent.label)}
+        onExerciseComplete={(e) => console.log('Done! Cycles:', e.nativeEvent.totalCycles)}
+      />
+      <Button title="Start" onPress={handleStart} />
+      <Button title="Stop" onPress={stopBreathingExercise} />
+    </View>
+  );
+}
+```
+
+### Breathing Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blobColors` | `ColorValue[]` | `['green', 'blue', 'pink']` | Gradient colors for the morphing blob |
+| `innerBlobColor` | `ColorValue` | `'white'` | Color of the inner blob |
+| `glowColor` | `ColorValue` | `'white'` | Color of the glow effects |
+| `particleColor` | `ColorValue` | `'white'` | Color of floating particles |
+| `progressRingColor` | `ColorValue` | `'white'` | Color of the progress ring |
+| `textColor` | `ColorValue` | `'white'` | Color of the instruction text |
+| `showProgressRing` | `boolean` | `true` | Show/hide the progress ring |
+| `showTextCue` | `boolean` | `true` | Show/hide the instruction text (e.g., "Breathe In") |
+| `showInnerBlob` | `boolean` | `true` | Show/hide the inner blob |
+| `showShadow` | `boolean` | `true` | Show/hide drop shadow |
+| `showParticles` | `boolean` | `true` | Show/hide floating particles |
+| `showWavyBlobs` | `boolean` | `true` | Show/hide wavy blob overlays |
+| `showGlowEffects` | `boolean` | `true` | Show/hide rotating glow effects |
+| `pointCount` | `number` | `8` | Number of points for blob morphing |
+| `wobbleIntensity` | `number` | `0.5` | Intensity of wobble animation (0-1) |
+| `style` | `StyleProp<ViewStyle>` | - | Container style (set width/height here) |
+
+### Breathing Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onPhaseChange` | `{ phase, label, phaseIndex, cycle }` | Fired when the breathing phase changes |
+| `onExerciseComplete` | `{ totalCycles, totalDuration }` | Fired when all cycles complete |
+
+### Breathing Control Functions
+
+```tsx
+import {
+  startBreathingExercise,
+  stopBreathingExercise,
+  pauseBreathingExercise,
+  resumeBreathingExercise,
+  getBreathingPreset,
+} from 'expo-orb';
+```
+
+| Function | Description |
+|----------|-------------|
+| `startBreathingExercise(pattern)` | Start the exercise with a custom pattern or preset |
+| `stopBreathingExercise()` | Stop the current exercise |
+| `pauseBreathingExercise()` | Pause the current exercise |
+| `resumeBreathingExercise()` | Resume a paused exercise |
+| `getBreathingPreset(name)` | Get a built-in preset by name |
+
+### Built-in Presets
+
+| Preset | Pattern | Cycles | Description |
+|--------|---------|--------|-------------|
+| `'relaxing'` | 4s in, 7s hold, 8s out | 4 | 4-7-8 technique for relaxation |
+| `'box'` | 4s in, 4s hold, 4s out, 4s hold | 4 | Box breathing for focus |
+| `'energizing'` | 2s in, 2s out | 10 | Quick breathing for energy |
+| `'calming'` | 4s in, 6s out | 6 | Extended exhale for calm |
+
+### Custom Breathing Patterns
+
+Create your own breathing patterns:
+
+```tsx
+import { startBreathingExercise, BreathingPattern } from 'expo-orb';
+
+const customPattern: BreathingPattern = {
+  phases: [
+    { phase: 'inhale', duration: 5000, targetScale: 1.35, label: 'Breathe In' },
+    { phase: 'holdIn', duration: 3000, targetScale: 1.35, label: 'Hold' },
+    { phase: 'exhale', duration: 7000, targetScale: 0.75, label: 'Breathe Out' },
+    { phase: 'holdOut', duration: 2000, targetScale: 0.75, label: 'Rest' },
+  ],
+  cycles: 5, // undefined for infinite
+};
+
+startBreathingExercise(customPattern);
+```
+
+### Phase Types
+
+| Phase | Description |
+|-------|-------------|
+| `'inhale'` | Breathing in - blob expands |
+| `'holdIn'` | Holding breath after inhale |
+| `'exhale'` | Breathing out - blob contracts |
+| `'holdOut'` | Holding breath after exhale |
+
+### Complete Breathing Example
+
+```tsx
+import * as React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  ExpoBreathingExerciseView,
+  startBreathingExercise,
+  stopBreathingExercise,
+  pauseBreathingExercise,
+  resumeBreathingExercise,
+  getBreathingPreset,
+  BreathingPreset,
+} from 'expo-orb';
+
+export default function BreathingApp() {
+  const [currentPhase, setCurrentPhase] = React.useState('');
+  const [isPaused, setIsPaused] = React.useState(false);
+
+  const startPreset = (preset: BreathingPreset) => {
+    setIsPaused(false);
+    startBreathingExercise(getBreathingPreset(preset));
+  };
+
+  return (
+    <View style={styles.container}>
+      <ExpoBreathingExerciseView
+        style={styles.breathingView}
+        blobColors={['#667eea', '#764ba2', '#f093fb']}
+        progressRingColor="#ffffff"
+        textColor="#ffffff"
+        showProgressRing={true}
+        showTextCue={true}
+        showParticles={true}
+        onPhaseChange={(e) => setCurrentPhase(e.nativeEvent.label)}
+        onExerciseComplete={() => setCurrentPhase('Complete!')}
+      />
+
+      <View style={styles.presets}>
+        <TouchableOpacity onPress={() => startPreset('box')}>
+          <Text>Box</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => startPreset('relaxing')}>
+          <Text>Relaxing</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => startPreset('calming')}>
+          <Text>Calming</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.controls}>
+        <TouchableOpacity onPress={() => {
+          if (isPaused) {
+            resumeBreathingExercise();
+          } else {
+            pauseBreathingExercise();
+          }
+          setIsPaused(!isPaused);
+        }}>
+          <Text>{isPaused ? 'Resume' : 'Pause'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={stopBreathingExercise}>
+          <Text>Stop</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  breathingView: { width: 280, height: 280 },
+  presets: { flexDirection: 'row', gap: 16, marginTop: 32 },
+  controls: { flexDirection: 'row', gap: 24, marginTop: 16 },
+});
+```
+
 ## License
 
 MIT

package/android/build.gradle

@@ -56,5 +56,7 @@ dependencies {
   implementation 'androidx.compose.ui:ui-graphics'
   implementation 'androidx.compose.foundation:foundation'
   implementation 'androidx.compose.runtime:runtime'
+  implementation 'androidx.compose.material3:material3'
+  implementation 'androidx.compose.animation:animation'
   implementation 'androidx.activity:activity-compose:1.8.2'
 }

package/android/src/main/java/expo/modules/breathing/BreathingConfiguration.kt

@@ -0,0 +1,25 @@
+package expo.modules.breathing
+
+import androidx.compose.ui.graphics.Color
+
+data class BreathingConfiguration(
+    val blobColors: List<Color> = listOf(
+        Color(0xFF66B3E6),  // Light blue
+        Color(0xFF4D80CC),  // Medium blue
+        Color(0xFF804DB3)   // Purple
+    ),
+    val innerBlobColor: Color = Color.White.copy(alpha = 0.3f),
+    val glowColor: Color = Color.White,
+    val particleColor: Color = Color.White,
+    val progressRingColor: Color = Color.White.copy(alpha = 0.5f),
+    val textColor: Color = Color.White,
+    val showProgressRing: Boolean = true,
+    val showTextCue: Boolean = true,
+    val showInnerBlob: Boolean = true,
+    val showShadow: Boolean = true,
+    val showParticles: Boolean = true,
+    val showWavyBlobs: Boolean = true,
+    val showGlowEffects: Boolean = true,
+    val pointCount: Int = 8,
+    val wobbleIntensity: Double = 1.0
+)