expo-orb 0.1.0

package/ios/Orb/WavyBlobView.swift

@@ -0,0 +1,83 @@
+import SwiftUI
+
+struct WavyBlobView: View {
+    @State private var points: [CGPoint] = (0 ..< 6).map { index in
+        let angle = (Double(index) / 6) * 2 * .pi
+        return CGPoint(
+            x: 0.5 + cos(angle) * 0.9,
+            y: 0.5 + sin(angle) * 0.9
+        )
+    }
+
+    private let color: Color
+    private let loopDuration: Double
+
+    init(color: Color, loopDuration: Double = 1) {
+        self.color = color
+        self.loopDuration = loopDuration
+    }
+
+    var body: some View {
+        TimelineView(.animation) { timeline in
+            Canvas { context, size in
+                let timeNow = timeline.date.timeIntervalSinceReferenceDate
+                let angle = (timeNow.remainder(dividingBy: loopDuration) / loopDuration) * 2 * .pi
+
+                var path = Path()
+                let center = CGPoint(x: size.width / 2, y: size.height / 2)
+                let radius = min(size.width, size.height) * 0.45
+
+                // Move points with larger variations using sine for smooth looping
+                let adjustedPoints = points.enumerated().map { index, point in
+                    let phaseOffset = Double(index) * .pi / 3
+                    let xOffset = sin(angle + phaseOffset) * 0.15
+                    let yOffset = cos(angle + phaseOffset) * 0.15
+                    return CGPoint(
+                        x: (point.x - 0.5 + xOffset) * radius + center.x,
+                        y: (point.y - 0.5 + yOffset) * radius + center.y
+                    )
+                }
+
+                // Start the path
+                path.move(to: adjustedPoints[0])
+
+                // Create smooth curves between points
+                for i in 0 ..< adjustedPoints.count {
+                    let next = (i + 1) % adjustedPoints.count
+
+                    // Calculate the angle between points
+                    let currentAngle = atan2(
+                        adjustedPoints[i].y - center.y,
+                        adjustedPoints[i].x - center.x
+                    )
+                    let nextAngle = atan2(
+                        adjustedPoints[next].y - center.y,
+                        adjustedPoints[next].x - center.x
+                    )
+
+                    // Create perpendicular handles
+                    let handleLength = radius * 0.33
+
+                    let control1 = CGPoint(
+                        x: adjustedPoints[i].x + cos(currentAngle + .pi / 2) * handleLength,
+                        y: adjustedPoints[i].y + sin(currentAngle + .pi / 2) * handleLength
+                    )
+
+                    let control2 = CGPoint(
+                        x: adjustedPoints[next].x + cos(nextAngle - .pi / 2) * handleLength,
+                        y: adjustedPoints[next].y + sin(nextAngle - .pi / 2) * handleLength
+                    )
+
+                    path.addCurve(
+                        to: adjustedPoints[next],
+                        control1: control1,
+                        control2: control2
+                    )
+                }
+
+                context.fill(path, with: .color(color))
+            }
+        }
+        .animation(.spring(), value: points)
+    }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "expo-orb",
+  "version": "0.1.0",
+  "description": "Animated orb component for React Native (iOS, Android, Web)",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-orb",
+    "orb",
+    "animation",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/enso-works/expo-orb",
+  "bugs": {
+    "url": "https://github.com/enso-works/expo-orb/issues"
+  },
+  "author": "Ensar Bavrk <ensar.bavrk@gmail.com> (https://github.com/enso-works)",
+  "license": "MIT",
+  "homepage": "https://github.com/enso-works/expo-orb#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "expo-module-scripts": "^5.0.8",
+    "expo": "^54.0.27",
+    "react-native": "0.81.5"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/ExpoOrb.types.ts

@@ -0,0 +1,17 @@
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+
+export type ExpoOrbViewProps = {
+  backgroundColors?: ColorValue[];
+  glowColor?: ColorValue;
+  particleColor?: ColorValue;
+  coreGlowIntensity?: number;
+  breathingIntensity?: number;
+  breathingSpeed?: number;
+  showBackground?: boolean;
+  showWavyBlobs?: boolean;
+  showParticles?: boolean;
+  showGlowEffects?: boolean;
+  showShadow?: boolean;
+  speed?: number;
+  style?: StyleProp<ViewStyle>;
+};

package/src/ExpoOrbModule.ts

@@ -0,0 +1,22 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+declare class ExpoOrbModule extends NativeModule {
+  /**
+   * Set the activity level (0-1) for the orb animation.
+   * Uses a native function instead of a prop to bypass React's reconciliation
+   * and prevent view re-renders that cause animation flickering.
+   */
+  setActivity(activity: number): void;
+}
+
+const module = requireNativeModule<ExpoOrbModule>('ExpoOrb');
+
+export default module;
+
+/**
+ * Set the orb activity level directly via native function.
+ * This bypasses React's prop system to prevent animation interference.
+ */
+export function setOrbActivity(activity: number): void {
+  module.setActivity(activity);
+}

package/src/ExpoOrbModule.web.ts

@@ -0,0 +1,5 @@
+import { registerWebModule, NativeModule } from 'expo';
+
+class ExpoOrbModule extends NativeModule {}
+
+export default registerWebModule(ExpoOrbModule, 'ExpoOrbModule');

package/src/ExpoOrbView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { ExpoOrbViewProps } from './ExpoOrb.types';
+
+const NativeView: React.ComponentType<ExpoOrbViewProps> =
+  requireNativeView('ExpoOrb');
+
+export default function ExpoOrbView(props: ExpoOrbViewProps) {
+  return <NativeView {...props} />;
+}

package/src/ExpoOrbView.web.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { ExpoOrbViewProps } from './ExpoOrb.types';
+
+const defaultColors = ['#22c55e', '#3b82f6', '#ec4899'];
+
+export default function ExpoOrbView(props: ExpoOrbViewProps) {
+  const colors = Array.isArray(props.backgroundColors) &&
+    props.backgroundColors.every((color) => typeof color === 'string')
+    ? (props.backgroundColors as string[])
+    : defaultColors;
+
+  const gradient = `radial-gradient(circle at 30% 30%, ${colors[0]}, ${colors[1] ?? colors[0]}, ${colors[2] ?? colors[1] ?? colors[0]})`;
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        borderRadius: '9999px',
+        background: gradient,
+        boxShadow: '0 0 30px rgba(255,255,255,0.2)',
+      }}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default, setOrbActivity } from './ExpoOrbModule';
+export { default as ExpoOrbView } from './ExpoOrbView';
+export * from  './ExpoOrb.types';

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}