react-native-gleam 1.0.0-beta.1

package/Gleam.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "Gleam"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/AppAndFlow/react-native-gleam.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 David Boutin
+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,150 @@
+# react-native-gleam
+
+Native-powered shimmer loading effect for React Native. Built with pure native animations — no reanimated, no SVG, zero dependencies.
+
+- **iOS**: `CAGradientLayer` + `CADisplayLink`
+- **Android**: `Choreographer` + `LinearGradient`
+- **Fabric only** (New Architecture)
+
+https://github.com/user-attachments/assets/70eb886c-f3e2-4611-8ecc-0b03227267d0
+
+## Installation
+
+```sh
+yarn add react-native-gleam
+```
+
+```sh
+npm install react-native-gleam
+```
+
+### Bare React Native
+
+Run `pod install` in your `ios/` directory.
+
+### Expo
+
+This library includes native code and requires a [development build](https://docs.expo.dev/develop/development-builds/introduction/). It does not work with Expo Go.
+
+```sh
+npx expo install react-native-gleam
+npx expo prebuild
+```
+
+No config plugin needed — autolinking and codegen handle everything.
+
+## Usage
+
+```tsx
+import { GleamView, GleamDirection, GleamTransition } from 'react-native-gleam';
+
+function UserCard({ loading, user }) {
+  return (
+    <GleamView
+      loading={loading}
+      style={{ width: '100%', height: 80, borderRadius: 12 }}
+    >
+      <Text>{user.name}</Text>
+    </GleamView>
+  );
+}
+```
+
+When `loading={true}`, children are hidden and a shimmer animation plays. When `loading={false}`, the shimmer fades out and children fade in.
+
+### Staggered skeleton
+
+```tsx
+<GleamView loading delay={0} style={styles.row} />
+<GleamView loading delay={150} style={styles.row} />
+<GleamView loading delay={300} style={styles.row} />
+```
+
+### All props
+
+```tsx
+<GleamView
+  loading={isLoading}
+  speed={800}
+  direction={GleamDirection.LeftToRight}
+  delay={0}
+  transitionDuration={300}
+  transitionType={GleamTransition.Fade}
+  intensity={0.7}
+  baseColor="#E0E0E0"
+  highlightColor="#F5F5F5"
+  onTransitionEnd={({ nativeEvent }) => {
+    console.log('Done', nativeEvent.finished);
+  }}
+  style={{ width: '100%', height: 80, borderRadius: 12 }}
+>
+  <Text>Your content</Text>
+</GleamView>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `loading` | `boolean` | `true` | Toggle shimmer on/off |
+| `speed` | `number` | `1000` | Duration of one shimmer cycle (ms) |
+| `direction` | `GleamDirection` | `LeftToRight` | Animation direction |
+| `delay` | `number` | `0` | Delay before animation starts (ms) — useful for stagger |
+| `transitionDuration` | `number` | `300` | Duration of the transition from shimmer to content (ms). `0` = instant |
+| `transitionType` | `GleamTransition` | `Fade` | Transition style when loading ends |
+| `intensity` | `number` | `1` | Highlight strength (0-1). Lower = more subtle shimmer |
+| `baseColor` | `string` | `#E0E0E0` | Background color of the shimmer |
+| `highlightColor` | `string` | `#F5F5F5` | Color of the moving highlight |
+| `onTransitionEnd` | `function` | — | Called when the fade transition completes. Receives `{ nativeEvent: { finished: boolean } }` |
+
+All standard `View` props are also supported (`style`, `testID`, etc.).
+
+### GleamDirection
+
+```tsx
+import { GleamDirection } from 'react-native-gleam';
+
+GleamDirection.LeftToRight  // 'ltr' (default)
+GleamDirection.RightToLeft  // 'rtl'
+GleamDirection.TopToBottom  // 'ttb'
+```
+
+### GleamTransition
+
+```tsx
+import { GleamTransition } from 'react-native-gleam';
+
+GleamTransition.Fade      // 'fade' (default) — opacity crossfade
+GleamTransition.Shrink    // 'shrink' — shimmer scales down while fading
+GleamTransition.Collapse  // 'collapse' — shimmer collapses vertically then horizontally
+```
+
+## Requirements
+
+- React Native **0.76+** (New Architecture / Fabric)
+- iOS 15+
+- Android SDK 24+
+
+This library requires the New Architecture (Fabric). It does not support the old architecture (Paper).
+
+## How it works
+
+`GleamView` wraps your content in a native view. When `loading={true}`:
+
+1. Children are hidden (opacity 0)
+2. A gradient overlay animates across the view
+3. The gradient uses `baseColor` → `highlightColor` → `baseColor`
+
+When `loading` switches to `false`:
+
+1. The shimmer transitions out over `transitionDuration` ms (style depends on `transitionType`)
+2. Children fade in simultaneously
+3. `onTransitionEnd` fires when complete
+
+All shimmer instances sharing the same `speed` are automatically synchronized via a shared clock.
+
+The shimmer respects `borderRadius` and all standard view styles.
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,67 @@
+buildscript {
+  ext.Gleam = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return Gleam[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.gleam"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/gleam/GleamPackage.kt

@@ -0,0 +1,17 @@
+package com.gleam
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class GleamViewPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(GleamViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/com/gleam/GleamView.kt

@@ -0,0 +1,379 @@
+package com.gleam
+
+import android.animation.ValueAnimator
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.LinearGradient
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.graphics.Shader
+import android.os.SystemClock
+import android.view.Choreographer
+import android.view.animation.DecelerateInterpolator
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.views.view.ReactViewGroup
+import kotlin.math.cos
+import kotlin.math.PI
+
+class GleamView(context: Context) : ReactViewGroup(context) {
+
+    enum class Direction { LTR, RTL, TTB }
+    enum class TransitionType { FADE, SHRINK, COLLAPSE }
+
+    var loading: Boolean = true
+        set(value) {
+            if (field != value) {
+                val wasLoading = field
+                field = value
+                applyLoadingState(wasLoading)
+            }
+        }
+
+    var speed: Float = 1000f
+        set(value) {
+            if (field != value) {
+                field = value
+            }
+        }
+
+    var direction: Direction = Direction.LTR
+        set(value) {
+            if (field != value) {
+                field = value
+            }
+        }
+
+    var delay: Float = 0f
+        set(value) {
+            if (field != value) {
+                field = value
+            }
+        }
+
+    var transitionDuration: Float = 300f
+        set(value) {
+            if (field != value) {
+                field = value
+            }
+        }
+
+    var transitionType: TransitionType = TransitionType.FADE
+        set(value) {
+            if (field != value) {
+                field = value
+            }
+        }
+
+    var intensity: Float = 1f
+        set(value) {
+            if (field != value) {
+                field = value.coerceIn(0f, 1f)
+                invalidate()
+            }
+        }
+
+    var baseColor: Int = 0xFFE0E0E0.toInt()
+        set(value) {
+            if (field != value) {
+                field = value
+                invalidate()
+            }
+        }
+
+    var highlightColor: Int = 0xFFF5F5F5.toInt()
+        set(value) {
+            if (field != value) {
+                field = value
+                invalidate()
+            }
+        }
+
+    private val shimmerPaint = Paint()
+    private val gradientColors = IntArray(3)
+    private val gradientPositions = floatArrayOf(0f, 0.5f, 1f)
+    private val gradientCoords = FloatArray(4)
+    private val clipPath = Path()
+    private val clipRect = RectF()
+    internal var cornerRadius: Float = 0f
+    private var transitionAnimator: ValueAnimator? = null
+    private var shimmerOpacity: Float = 1f
+    private var contentOpacity: Float = 0f
+    private var isTransitioning: Boolean = false
+    private var transitionProgress: Float = 0f
+    private var isRegistered: Boolean = false
+
+    init {
+        setWillNotDraw(false)
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        if (loading) {
+            registerClock()
+        }
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        unregisterClock()
+        transitionAnimator?.cancel()
+        transitionAnimator = null
+        isTransitioning = false
+    }
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        if (loading && w > 0 && h > 0 && !isRegistered) {
+            registerClock()
+        }
+    }
+
+    private fun registerClock() {
+        if (!isRegistered) {
+            isRegistered = true
+            SharedClock.register(this)
+        }
+    }
+
+    private fun unregisterClock() {
+        if (isRegistered) {
+            isRegistered = false
+            SharedClock.unregister(this)
+        }
+    }
+
+    /** Called by SharedClock every frame */
+    fun onFrame() {
+        invalidate()
+    }
+
+    /**
+     * Compute progress from global time.
+     * Uses cosine easing: progress = (1 - cos(phase)) / 2
+     * This matches AccelerateDecelerateInterpolator and ensures smooth looping.
+     */
+    private fun computeProgress(): Float {
+        val timeMs = SystemClock.uptimeMillis().toFloat()
+        val effectiveTime = (timeMs - delay).coerceAtLeast(0f)
+        val rawProgress = (effectiveTime % speed) / speed
+        // AccelerateDecelerateInterpolator equivalent: (cos((x + 1) * PI) / 2) + 0.5
+        return ((cos((rawProgress + 1.0) * PI) / 2.0) + 0.5).toFloat()
+    }
+
+    override fun dispatchDraw(canvas: Canvas) {
+        val w = width.toFloat()
+        val h = height.toFloat()
+        if (w <= 0 || h <= 0) return
+
+        // Draw children with content opacity
+        if (contentOpacity > 0f) {
+            if (contentOpacity < 1f) {
+                val count = canvas.saveLayerAlpha(0f, 0f, w, h, (contentOpacity * 255).toInt())
+                super.dispatchDraw(canvas)
+                canvas.restoreToCount(count)
+            } else {
+                super.dispatchDraw(canvas)
+            }
+        }
+
+        // Draw shimmer overlay
+        if ((loading || isTransitioning) && shimmerOpacity > 0f) {
+            val animationProgress = computeProgress()
+
+            val effectiveHighlight = if (intensity < 1f) {
+                blendColor(baseColor, highlightColor, intensity)
+            } else {
+                highlightColor
+            }
+
+            gradientColors[0] = baseColor
+            gradientColors[1] = effectiveHighlight
+            gradientColors[2] = baseColor
+
+            when (direction) {
+                Direction.LTR -> {
+                    val size = w
+                    val s = -size + (animationProgress * (w + 2 * size))
+                    gradientCoords[0] = s; gradientCoords[1] = 0f
+                    gradientCoords[2] = s + size; gradientCoords[3] = 0f
+                }
+                Direction.RTL -> {
+                    val size = w
+                    val s = w + size - (animationProgress * (w + 2 * size))
+                    gradientCoords[0] = s; gradientCoords[1] = 0f
+                    gradientCoords[2] = s - size; gradientCoords[3] = 0f
+                }
+                Direction.TTB -> {
+                    val size = h
+                    val s = -size + (animationProgress * (h + 2 * size))
+                    gradientCoords[0] = 0f; gradientCoords[1] = s
+                    gradientCoords[2] = 0f; gradientCoords[3] = s + size
+                }
+            }
+
+            shimmerPaint.shader = LinearGradient(
+                gradientCoords[0], gradientCoords[1],
+                gradientCoords[2], gradientCoords[3],
+                gradientColors, gradientPositions,
+                Shader.TileMode.CLAMP
+            )
+            shimmerPaint.alpha = (shimmerOpacity * 255).toInt()
+
+            // Shrink: scale down, fade starts at 30%
+            if (isTransitioning && transitionType == TransitionType.SHRINK) {
+                val scale = 1f - transitionProgress * 0.5f
+                val shrinkOpacity = (1f - transitionProgress * 2.5f).coerceAtLeast(0f)
+                shimmerPaint.alpha = (shrinkOpacity * 255).toInt()
+                canvas.save()
+                canvas.scale(scale, scale, w / 2f, h / 2f)
+            }
+
+            // Collapse: vertically then horizontally, with opacity fade
+            if (isTransitioning && transitionType == TransitionType.COLLAPSE) {
+                val p = transitionProgress
+                val scaleY = if (p < 0.6f) 1f - (p / 0.6f) * 0.98f else 0.02f
+                val scaleX = if (p < 0.6f) 1f else 1f - ((p - 0.6f) / 0.4f)
+                val collapseOpacity = (1f - p * 2.5f).coerceAtLeast(0f)
+                shimmerPaint.alpha = (collapseOpacity * 255).toInt()
+                canvas.save()
+                canvas.scale(scaleX, scaleY, w / 2f, h / 2f)
+            }
+
+            if (cornerRadius > 0f) {
+                val r = PixelUtil.toPixelFromDIP(cornerRadius)
+                val count = canvas.save()
+                clipPath.reset()
+                clipRect.set(0f, 0f, w, h)
+                clipPath.addRoundRect(clipRect, r, r, Path.Direction.CW)
+                canvas.clipPath(clipPath)
+                canvas.drawRect(0f, 0f, w, h, shimmerPaint)
+                canvas.restoreToCount(count)
+            } else {
+                canvas.drawRect(0f, 0f, w, h, shimmerPaint)
+            }
+
+            // Restore scale/CRT transform
+            if (isTransitioning && (transitionType == TransitionType.SHRINK || transitionType == TransitionType.COLLAPSE)) {
+                canvas.restore()
+            }
+        }
+    }
+
+    private fun blendColor(from: Int, to: Int, ratio: Float): Int {
+        val r = Color.red(from) + ((Color.red(to) - Color.red(from)) * ratio).toInt()
+        val g = Color.green(from) + ((Color.green(to) - Color.green(from)) * ratio).toInt()
+        val b = Color.blue(from) + ((Color.blue(to) - Color.blue(from)) * ratio).toInt()
+        val a = Color.alpha(from) + ((Color.alpha(to) - Color.alpha(from)) * ratio).toInt()
+        return Color.argb(a, r, g, b)
+    }
+
+    private fun applyLoadingState(wasLoading: Boolean) {
+        if (loading) {
+            transitionAnimator?.cancel()
+            transitionAnimator = null
+            isTransitioning = false
+            contentOpacity = 0f
+            shimmerOpacity = 1f
+            registerClock()
+            invalidate()
+        } else {
+            if (wasLoading && transitionDuration > 0f) {
+                isTransitioning = true
+                transitionAnimator?.cancel()
+
+                transitionAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+                    duration = transitionDuration.toLong()
+                    interpolator = DecelerateInterpolator()
+                    addUpdateListener { anim ->
+                        val p = anim.animatedValue as Float
+                        transitionProgress = p
+                        contentOpacity = p
+                        shimmerOpacity = 1f - p
+                        invalidate()
+                    }
+                    addListener(object : android.animation.AnimatorListenerAdapter() {
+                        override fun onAnimationEnd(animation: android.animation.Animator) {
+                            finishTransition()
+                        }
+                    })
+                    start()
+                }
+            } else {
+                unregisterClock()
+                contentOpacity = 1f
+                shimmerOpacity = 0f
+                invalidate()
+                emitTransitionEnd(true)
+            }
+        }
+    }
+
+    private fun finishTransition() {
+        isTransitioning = false
+        unregisterClock()
+        contentOpacity = 1f
+        shimmerOpacity = 0f
+        invalidate()
+        emitTransitionEnd(true)
+    }
+
+    private fun emitTransitionEnd(finished: Boolean) {
+        val reactContext = context as? ReactContext ?: return
+        val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id) ?: return
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        dispatcher.dispatchEvent(TransitionEndEvent(surfaceId, id, finished))
+    }
+
+    class TransitionEndEvent(
+        surfaceId: Int,
+        viewId: Int,
+        private val finished: Boolean
+    ) : Event<TransitionEndEvent>(surfaceId, viewId) {
+        override fun getEventName() = "topTransitionEnd"
+        override fun getEventData(): WritableMap {
+            return Arguments.createMap().apply {
+                putBoolean("finished", finished)
+            }
+        }
+    }
+
+    /**
+     * Shared Choreographer-based clock that drives all GleamView instances.
+     * Views with the same speed/delay are automatically in sync because
+     * they compute progress from the same global timestamp.
+     */
+    companion object SharedClock {
+        private val views = mutableSetOf<GleamView>()
+        private var frameCallback: Choreographer.FrameCallback? = null
+
+        fun register(view: GleamView) {
+            views.add(view)
+            if (views.size == 1) start()
+        }
+
+        fun unregister(view: GleamView) {
+            views.remove(view)
+            if (views.isEmpty()) stop()
+        }
+
+        private fun start() {
+            frameCallback = Choreographer.FrameCallback { _ ->
+                views.toList().forEach { it.onFrame() }
+                frameCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+            }
+            Choreographer.getInstance().postFrameCallback(frameCallback!!)
+        }
+
+        private fun stop() {
+            frameCallback?.let { Choreographer.getInstance().removeFrameCallback(it) }
+            frameCallback = null
+        }
+    }
+}