expo-orb 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ensar Bavrk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# expo-orb
+
+An animated orb component for React Native with Expo. Renders a glowing, animated sphere with particles, wavy blobs, and customizable visual effects.
+
+Inspired by and iOS implementation from [metasidd/Orb](https://github.com/metasidd/Orb)
+
+## Demo
+
+| 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) |
+
+## Features
+
+- Smooth 60fps animations
+- Activity-based animation states (idle, speaking, etc.)
+- Breathing animation effect
+- Customizable colors, particles, and glow effects
+- Native performance on iOS (SwiftUI/SpriteKit) and Android (Jetpack Compose)
+
+## Installation
+
+```bash
+npm install expo-orb
+```
+
+For bare React Native projects, run `npx pod-install` after installation.
+
+## Usage
+
+```tsx
+import { ExpoOrbView, setOrbActivity } from 'expo-orb';
+
+function MyComponent() {
+  return (
+    <ExpoOrbView
+      style={{ width: 200, height: 200 }}
+      backgroundColors={['#7c3aed', '#3b82f6', '#ec4899']}
+      glowColor="#ffffff"
+      particleColor="#ffffff"
+      showBackground={true}
+      showWavyBlobs={true}
+      showParticles={true}
+      showGlowEffects={true}
+      showShadow={true}
+    />
+  );
+}
+
+// Control animation intensity (0-1)
+setOrbActivity(0.8); // Active/speaking state
+setOrbActivity(0.1); // Idle state
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundColors` | `ColorValue[]` | `['green', 'blue', 'pink']` | Gradient colors for the orb background (min 2 colors) |
+| `glowColor` | `ColorValue` | `'white'` | Color of the glow effects |
+| `particleColor` | `ColorValue` | `'white'` | Color of floating particles |
+| `coreGlowIntensity` | `number` | `1.0` | Intensity of the core glow effect (0+) |
+| `breathingIntensity` | `number` | `0` | Intensity of breathing animation (0-1) |
+| `breathingSpeed` | `number` | `0.25` | Speed of breathing animation |
+| `showBackground` | `boolean` | `true` | Show/hide background gradient |
+| `showWavyBlobs` | `boolean` | `true` | Show/hide animated wavy blob overlays |
+| `showParticles` | `boolean` | `true` | Show/hide floating particles |
+| `showGlowEffects` | `boolean` | `true` | Show/hide rotating glow effects |
+| `showShadow` | `boolean` | `true` | Show/hide drop shadow |
+| `speed` | `number` | `60` | Animation speed multiplier |
+| `style` | `StyleProp<ViewStyle>` | - | Container style (set width/height here) |
+
+## Methods
+
+### `setOrbActivity(activity: number)`
+
+Controls the orb's animation intensity. Pass a value between 0 and 1:
+
+- `0` - Minimal activity (idle)
+- `0.1-0.3` - Low activity
+- `0.5-0.7` - Medium activity
+- `0.8-1.0` - High activity (speaking/active)
+
+This function bypasses React's prop system to prevent animation flickering during rapid updates.
+
+```tsx
+import { setOrbActivity } from 'expo-orb';
+
+// Transition to speaking state
+setOrbActivity(0.85);
+
+// Return to idle
+setOrbActivity(0.08);
+```
+
+## Example
+
+See the `/example` directory for a complete working example with activity simulation.
+
+```tsx
+import * as React from 'react';
+import { View } from 'react-native';
+import { ExpoOrbView, setOrbActivity } from 'expo-orb';
+
+export default function App() {
+  React.useEffect(() => {
+    // Simulate activity changes
+    const interval = setInterval(() => {
+      const activity = Math.random() > 0.5 ? 0.85 : 0.08;
+      setOrbActivity(activity);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <ExpoOrbView
+        style={{ width: 220, height: 220 }}
+        backgroundColors={['#7c3aed', '#3b82f6', '#ec4899']}
+      />
+    </View>
+  );
+}
+```
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,60 @@
+buildscript {
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+}
+
+plugins {
+  id 'com.android.library'
+  id 'kotlin-android'
+  id 'org.jetbrains.kotlin.plugin.compose' version '2.1.20'
+}
+
+group = 'expo.modules.iosorb'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+android {
+  namespace "expo.modules.iosorb"
+  compileSdkVersion safeExtGet("compileSdkVersion", 34)
+
+  defaultConfig {
+    minSdkVersion safeExtGet("minSdkVersion", 24)
+    targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    versionCode 1
+    versionName "0.1.0"
+  }
+
+  lintOptions {
+    abortOnError false
+  }
+
+  buildFeatures {
+    compose true
+  }
+
+  kotlinOptions {
+    jvmTarget = '17'
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  def composeBom = platform('androidx.compose:compose-bom:2024.02.00')
+  implementation composeBom
+
+  implementation 'androidx.compose.ui:ui'
+  implementation 'androidx.compose.ui:ui-graphics'
+  implementation 'androidx.compose.foundation:foundation'
+  implementation 'androidx.compose.runtime:runtime'
+  implementation 'androidx.activity:activity-compose:1.8.2'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/orb/ExpoOrbModule.kt

@@ -0,0 +1,79 @@
+package expo.modules.orb
+
+import android.graphics.Color as AndroidColor
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoOrbModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Name("ExpoOrb")
+
+        // Activity function - bypasses React's prop reconciliation
+        Function("setActivity") { activity: Double ->
+            val clampedActivity = activity.coerceIn(0.0, 1.0)
+            OrbSharedState.targetActivity = clampedActivity
+        }
+
+        View(ExpoOrbView::class) {
+            // Colors come as strings (hex) or integers from React Native
+            Prop("backgroundColors") { view: ExpoOrbView, colors: List<Any> ->
+                val parsedColors = colors.map { parseColor(it) }
+                view.setBackgroundColors(parsedColors)
+            }
+
+            Prop("glowColor") { view: ExpoOrbView, color: Any ->
+                view.setGlowColor(parseColor(color))
+            }
+
+            Prop("particleColor") { view: ExpoOrbView, color: Any ->
+                view.setParticleColor(parseColor(color))
+            }
+
+            Prop("coreGlowIntensity") { view: ExpoOrbView, value: Double ->
+                view.setCoreGlowIntensity(value)
+            }
+
+            Prop("breathingIntensity") { view: ExpoOrbView, value: Double ->
+                view.setBreathingIntensity(value)
+            }
+
+            Prop("breathingSpeed") { view: ExpoOrbView, value: Double ->
+                view.setBreathingSpeed(value)
+            }
+
+            Prop("showBackground") { view: ExpoOrbView, value: Boolean ->
+                view.setShowBackground(value)
+            }
+
+            Prop("showWavyBlobs") { view: ExpoOrbView, value: Boolean ->
+                view.setShowWavyBlobs(value)
+            }
+
+            Prop("showParticles") { view: ExpoOrbView, value: Boolean ->
+                view.setShowParticles(value)
+            }
+
+            Prop("showGlowEffects") { view: ExpoOrbView, value: Boolean ->
+                view.setShowGlowEffects(value)
+            }
+
+            Prop("showShadow") { view: ExpoOrbView, value: Boolean ->
+                view.setShowShadow(value)
+            }
+
+            Prop("speed") { view: ExpoOrbView, value: Double ->
+                view.setSpeed(value)
+            }
+        }
+    }
+
+    private fun parseColor(value: Any): Int {
+        return when (value) {
+            is String -> AndroidColor.parseColor(value)
+            is Int -> value
+            is Double -> value.toInt()
+            is Long -> value.toInt()
+            else -> AndroidColor.WHITE
+        }
+    }
+}

package/android/src/main/java/expo/modules/orb/ExpoOrbView.kt

@@ -0,0 +1,105 @@
+package expo.modules.orb
+
+import android.content.Context
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+
+class ExpoOrbView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+    // Mutable state for configuration
+    private var config by mutableStateOf(OrbConfiguration())
+
+    private val composeView = ComposeView(context).apply {
+        setContent {
+            OrbViewContent()
+        }
+    }
+
+    init {
+        // Allow glow/shadow effects to render outside view bounds
+        clipChildren = false
+        clipToPadding = false
+        composeView.clipChildren = false
+        composeView.clipToPadding = false
+        addView(composeView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    @Composable
+    private fun OrbViewContent() {
+        // Add padding so glow/shadow can overflow outside the orb circle
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(24.dp),  // Space for glow overflow
+            contentAlignment = Alignment.Center
+        ) {
+            OrbView(
+                config = config,
+                useSharedActivityState = true,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+    }
+
+    fun setBackgroundColors(colors: List<Int>) {
+        config = config.copy(
+            backgroundColors = colors.map { Color(it) }
+        )
+    }
+
+    fun setGlowColor(color: Int) {
+        config = config.copy(glowColor = Color(color))
+    }
+
+    fun setParticleColor(color: Int) {
+        config = config.copy(particleColor = Color(color))
+    }
+
+    fun setCoreGlowIntensity(value: Double) {
+        config = config.copy(coreGlowIntensity = value)
+    }
+
+    fun setBreathingIntensity(value: Double) {
+        config = config.copy(breathingIntensity = value)
+    }
+
+    fun setBreathingSpeed(value: Double) {
+        config = config.copy(breathingSpeed = value)
+    }
+
+    fun setShowBackground(value: Boolean) {
+        config = config.copy(showBackground = value)
+    }
+
+    fun setShowWavyBlobs(value: Boolean) {
+        config = config.copy(showWavyBlobs = value)
+    }
+
+    fun setShowParticles(value: Boolean) {
+        config = config.copy(showParticles = value)
+    }
+
+    fun setShowGlowEffects(value: Boolean) {
+        config = config.copy(showGlowEffects = value)
+    }
+
+    fun setShowShadow(value: Boolean) {
+        config = config.copy(showShadow = value)
+    }
+
+    fun setSpeed(value: Double) {
+        config = config.copy(speed = value)
+    }
+}

package/android/src/main/java/expo/modules/orb/OrbConfiguration.kt

@@ -0,0 +1,30 @@
+package expo.modules.orb
+
+import androidx.compose.ui.graphics.Color
+
+data class OrbConfiguration(
+    val backgroundColors: List<Color> = listOf(Color.Green, Color.Blue, Color.Magenta),
+    val glowColor: Color = Color.White,
+    val particleColor: Color = Color.White,
+    val coreGlowIntensity: Double = 1.0,
+    val showBackground: Boolean = true,
+    val showWavyBlobs: Boolean = true,
+    val showParticles: Boolean = true,
+    val showGlowEffects: Boolean = true,
+    val showShadow: Boolean = true,
+    val speed: Double = 60.0,
+    val breathingIntensity: Double = 0.0,
+    val breathingSpeed: Double = 0.25
+)
+
+/**
+ * Effective configuration computed from activity level.
+ * All speeds must stay CONSTANT to avoid animation jumps.
+ */
+data class EffectiveConfig(
+    val speed: Double,
+    val breathingIntensity: Double,
+    val breathingSpeed: Double,
+    val coreGlowIntensity: Double,
+    val glowColor: Color
+)

package/android/src/main/java/expo/modules/orb/OrbSharedState.kt

@@ -0,0 +1,25 @@
+package expo.modules.orb
+
+/**
+ * Shared state for activity animation - mirrors iOS OrbSharedState.
+ *
+ * This singleton allows smooth animations when bridging React Native ↔ Compose.
+ * JS sends target values, native interpolates during animation loop.
+ */
+object OrbSharedState {
+    @Volatile
+    var targetActivity: Double = 0.0  // Written by native bridge, read by animation loop
+
+    @Volatile
+    var currentActivity: Double = 0.0  // Interpolated value, updated each frame
+
+    @Volatile
+    var lastUpdateTime: Long = System.nanoTime()  // For frame-time-based interpolation
+
+    // Cumulative phase for breathing - allows speed changes without jumps
+    @Volatile
+    var breathingPhase: Double = 0.0
+
+    @Volatile
+    var lastBreathingUpdate: Long = System.nanoTime()
+}