@onekeyfe/react-native-skeleton 1.1.11

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 @onekeyfe
+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,39 @@
+# react-native-skeleton
+
+react-native-skeleton
+
+## Installation
+
+
+```sh
+npm install react-native-skeleton react-native-nitro-modules
+
+> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
+```
+
+
+## Usage
+
+
+```js
+import { SkeletonView } from "react-native-skeleton";
+
+// ...
+
+<SkeletonView color="tomato" />
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/Skeleton.podspec

@@ -0,0 +1,29 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "Skeleton"
+  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/OneKeyHQ/app-views/react-native-skeleton.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{swift}",
+    "ios/**/*.{m,mm}",
+    "cpp/**/*.{hpp,cpp}",
+  ]
+
+  s.dependency 'React-jsi'
+  s.dependency 'React-callinvoker'
+
+  load 'nitrogen/generated/ios/Skeleton+autolinking.rb'
+  add_nitrogen_files(s)
+
+  install_modules_dependencies(s)
+end

package/android/CMakeLists.txt

@@ -0,0 +1,24 @@
+project(skeleton)
+cmake_minimum_required(VERSION 3.9.0)
+
+set(PACKAGE_NAME skeleton)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+set(CMAKE_CXX_STANDARD 20)
+
+# Define C++ library and add all sources
+add_library(${PACKAGE_NAME} SHARED src/main/cpp/cpp-adapter.cpp)
+
+# Add Nitrogen specs :)
+include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/skeleton+autolinking.cmake)
+
+# Set up local includes
+include_directories("src/main/cpp" "../cpp")
+
+find_library(LOG_LIB log)
+
+# Link all libraries together
+target_link_libraries(
+        ${PACKAGE_NAME}
+        ${LOG_LIB}
+        android # <-- Android core
+)

package/android/build.gradle

@@ -0,0 +1,128 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['Skeleton_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply from: '../nitrogen/generated/android/skeleton+autolinking.gradle'
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["Skeleton_" + name]).toInteger()
+}
+
+android {
+  namespace "com.margelo.nitro.skeleton"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
+    externalNativeBuild {
+      cmake {
+        cppFlags "-frtti -fexceptions -Wall -fstack-protector-all"
+        arguments "-DANDROID_STL=c++_shared", "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+        abiFilters (*reactNativeArchitectures())
+
+        buildTypes {
+          debug {
+            cppFlags "-O1 -g"
+          }
+          release {
+            cppFlags "-O2"
+          }
+        }
+      }
+    }
+  }
+
+  externalNativeBuild {
+    cmake {
+      path "CMakeLists.txt"
+    }
+  }
+
+  packagingOptions {
+    excludes = [
+            "META-INF",
+            "META-INF/**",
+            "**/libc++_shared.so",
+            "**/libfbjni.so",
+            "**/libjsi.so",
+            "**/libfolly_json.so",
+            "**/libfolly_runtime.so",
+            "**/libglog.so",
+            "**/libhermes.so",
+            "**/libhermes-executor-debug.so",
+            "**/libhermes_executor.so",
+            "**/libreactnative.so",
+            "**/libreactnativejni.so",
+            "**/libturbomodulejsijni.so",
+            "**/libreact_nativemodule_core.so",
+            "**/libjscexecutor.so"
+    ]
+  }
+
+  buildFeatures {
+    buildConfig true
+    prefab true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation project(":react-native-nitro-modules")
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+Skeleton_kotlinVersion=2.0.21
+Skeleton_minSdkVersion=24
+Skeleton_targetSdkVersion=34
+Skeleton_compileSdkVersion=35
+Skeleton_ndkVersion=27.1.12297006

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/cpp/cpp-adapter.cpp

@@ -0,0 +1,6 @@
+#include <jni.h>
+#include "skeletonOnLoad.hpp"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
+  return margelo::nitro::skeleton::initialize(vm);
+}

package/android/src/main/java/com/margelo/nitro/skeleton/Skeleton.kt

@@ -0,0 +1,135 @@
+package com.margelo.nitro.skeleton
+
+import android.animation.ValueAnimator
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.LinearGradient
+import android.graphics.Paint
+import android.graphics.Shader
+import android.view.View
+import android.view.animation.LinearInterpolator
+import com.facebook.proguard.annotations.DoNotStrip
+import com.facebook.react.uimanager.ThemedReactContext
+import androidx.core.graphics.toColorInt
+
+// Animation constants
+val DEFAULT_GRADIENT_COLORS = intArrayOf(
+    Color.rgb(210, 210, 210),
+    Color.rgb(235, 235, 235)
+)
+
+@DoNotStrip
+class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
+
+  // Shimmer animation
+  private var shimmerAnimator: ValueAnimator? = null
+  private var shimmerPaint: Paint = Paint()
+  private var translateX: Float = 0f
+
+  // Animation properties
+  private var customGradientColors: IntArray? = null
+  private var animationSpeed: Long = 3000L
+
+  // View with shimmer effect
+  override val view: View = object : View(context) {
+    override fun onDraw(canvas: Canvas) {
+      super.onDraw(canvas)
+
+      if (width > 0 && height > 0) {
+        val colors = customGradientColors ?: DEFAULT_GRADIENT_COLORS
+        val backgroundColor = colors[0]
+        val highlightColor = colors[1]
+
+        val gradient = LinearGradient(
+          translateX - width,
+          0f,
+          translateX,
+          0f,
+          intArrayOf(backgroundColor, highlightColor, backgroundColor),
+          floatArrayOf(0f, 0.5f, 1f),
+          Shader.TileMode.CLAMP
+        )
+
+        shimmerPaint.shader = gradient
+        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), shimmerPaint)
+      }
+    }
+  }
+
+  override var shimmerSpeed: Double?
+    get() = animationSpeed.toDouble() / 1000.0
+    set(value) {
+      animationSpeed = ((value ?: 3.0) * 1000).toLong()
+      restartShimmer()
+    }
+
+  override var shimmerGradientColors: Array<String>?
+    get() = customGradientColors?.map { String.format("#%06X", 0xFFFFFF and it) }?.toTypedArray()
+    set(value) {
+      if (value != null) {
+        customGradientColors = value.map { hexStringToColor(it) }.toIntArray()
+        restartShimmer()
+      }
+    }
+
+  init {
+    setupView()
+  }
+
+  private fun setupView() {
+    view.post {
+      startShimmer()
+    }
+  }
+
+  private fun startShimmer() {
+    stopShimmer()
+
+    if (view.width == 0 || view.height == 0) {
+      view.postDelayed({ startShimmer() }, 100)
+      return
+    }
+
+    val width = view.width.toFloat()
+
+    shimmerAnimator = ValueAnimator.ofFloat(-width, width * 2).apply {
+      duration = animationSpeed
+      repeatCount = ValueAnimator.INFINITE
+      interpolator = LinearInterpolator()
+      addUpdateListener { animation ->
+        translateX = animation.animatedValue as Float
+        view.invalidate()
+      }
+      start()
+    }
+  }
+
+  private fun stopShimmer() {
+    shimmerAnimator?.cancel()
+    shimmerAnimator = null
+  }
+
+  override fun afterUpdate() {
+    super.afterUpdate()
+    restartShimmer()
+  }
+
+  private fun restartShimmer() {
+    stopShimmer()
+    startShimmer()
+  }
+
+  private fun hexStringToColor(hexColor: String): Int {
+    var hexSanitized = hexColor.trim()
+
+    if (hexSanitized.startsWith("#")) {
+      hexSanitized = hexSanitized.substring(1)
+    }
+
+    return try {
+      Color.parseColor("#$hexSanitized")
+    } catch (e: Exception) {
+      DEFAULT_GRADIENT_COLORS[0]
+    }
+  }
+}

package/android/src/main/java/com/margelo/nitro/skeleton/SkeletonPackage.kt

@@ -0,0 +1,29 @@
+package com.margelo.nitro.skeleton
+
+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
+
+import com.margelo.nitro.skeleton.views.HybridSkeletonManager
+
+class SkeletonPackage : BaseReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider { HashMap() }
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(HybridSkeletonManager())
+    }
+
+    companion object {
+        init {
+            System.loadLibrary("skeleton")
+        }
+    }
+}

package/ios/Skeleton.swift

@@ -0,0 +1,126 @@
+import Foundation
+import UIKit
+
+// Animation constants
+let DEFAULT_GRADIENT_COLORS: [UIColor] = [UIColor(red: 210.0/255.0, green: 210.0/255.0, blue: 210.0/255.0, alpha: 1.0), UIColor(red: 235.0/255.0, green: 235.0/255.0, blue: 235.0/255.0, alpha: 1.0)]
+
+class HybridSkeleton : HybridSkeletonSpec {
+  
+  // Shimmer layer
+  private var shimmerLayer: CAGradientLayer?
+  private var customGradientColors: [UIColor]?
+  
+  var shimmerGradientColors: [String]? {
+    didSet {
+      Task {
+        customGradientColors = shimmerGradientColors?.map { hexStringToUIColor(hexColor: $0) }
+        await MainActor.run {
+          restartShimmer()
+        }
+      }
+    }
+  }
+  
+  // UIView
+  var view: UIView = UIView()
+
+  var shimmerSpeed: Double? {
+    didSet {
+      restartShimmer()
+    }
+  }
+  
+  override init() {
+    super.init()
+    setupView()
+  }
+  
+  private func setupView() {
+    view.clipsToBounds = true
+    
+    // Start animation when view is ready
+    DispatchQueue.main.async {
+      self.startShimmer()
+    }
+  }
+  
+  func startShimmer() {
+    stopShimmer()
+    
+    guard !view.bounds.isEmpty else {
+      // Retry after a short delay if bounds are not ready
+      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+        self.startShimmer()
+      }
+      return
+    }
+    
+    let colors: [UIColor] = customGradientColors ?? DEFAULT_GRADIENT_COLORS
+    let backgroundColor = colors[0].cgColor
+    let highlightColor = colors[1].cgColor
+    
+    let skeletonLayer = CALayer()
+    skeletonLayer.backgroundColor = backgroundColor
+    skeletonLayer.name = "SkeletonLayer"
+    skeletonLayer.anchorPoint = .zero
+    skeletonLayer.frame = view.bounds
+    
+    let gradientLayer = CAGradientLayer()
+    gradientLayer.colors = [backgroundColor, highlightColor, backgroundColor]
+    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
+    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
+    gradientLayer.frame = view.bounds
+    gradientLayer.name = "ShimmerLayer"
+    
+    view.layer.mask = skeletonLayer
+    view.layer.addSublayer(skeletonLayer)
+    view.layer.addSublayer(gradientLayer)
+    view.clipsToBounds = true
+    
+    shimmerLayer = gradientLayer
+    
+    let width = view.bounds.width
+    let animation = CABasicAnimation(keyPath: "transform.translation.x")
+    animation.duration = shimmerSpeed ?? 3
+    animation.fromValue = -width
+    animation.toValue = width
+    animation.repeatCount = .infinity
+    animation.autoreverses = false
+    animation.fillMode = CAMediaTimingFillMode.forwards
+    
+    gradientLayer.add(animation, forKey: "shimmerAnimation")
+  }
+  
+  func stopShimmer() {
+    shimmerLayer?.removeAnimation(forKey: "shimmerAnimation")
+    shimmerLayer?.removeFromSuperlayer()
+    shimmerLayer = nil
+  }
+  
+  func afterUpdate() {
+    restartShimmer()
+  }
+  
+  func restartShimmer() {
+    stopShimmer()
+    startShimmer()
+  }
+  
+  func hexStringToUIColor(hexColor: String) -> UIColor {
+    var hexSanitized = hexColor.trimmingCharacters(in: .whitespacesAndNewlines)
+    
+    if hexSanitized.hasPrefix("#") {
+      hexSanitized.remove(at: hexSanitized.startIndex)
+    }
+    
+    var color: UInt32 = 0
+    let stringScanner = Scanner(string: hexSanitized)
+    stringScanner.scanHexInt32(&color)
+
+    let r = CGFloat(Int(color >> 16) & 0x000000FF)
+    let g = CGFloat(Int(color >> 8) & 0x000000FF)
+    let b = CGFloat(Int(color) & 0x000000FF)
+
+    return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: 1)
+  }
+}

package/lib/module/Skeleton.nitro.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=Skeleton.nitro.js.map

package/lib/module/Skeleton.nitro.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["Skeleton.nitro.ts"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+import { getHostComponent } from 'react-native-nitro-modules';
+const SkeletonConfig = require('../nitrogen/generated/shared/json/SkeletonConfig.json');
+export const SkeletonView = getHostComponent('Skeleton', () => SkeletonConfig);
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getHostComponent","SkeletonConfig","require","SkeletonView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,MAAMC,cAAc,GAAGC,OAAO,CAAC,uDAAuD,CAAC;AAGvF,OAAO,MAAMC,YAAY,GAAGH,gBAAgB,CAC1C,UAAU,EACV,MAAMC,cACR,CAAC","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/nitrogen/generated/android/c++/JHybridSkeletonSpec.cpp

@@ -0,0 +1,85 @@
+///
+/// JHybridSkeletonSpec.cpp
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/mrousavy/nitro
+/// Copyright © 2025 Marc Rousavy @ Margelo
+///
+
+#include "JHybridSkeletonSpec.hpp"
+
+
+
+#include <optional>
+#include <string>
+#include <vector>
+
+namespace margelo::nitro::skeleton {
+
+  jni::local_ref<JHybridSkeletonSpec::jhybriddata> JHybridSkeletonSpec::initHybrid(jni::alias_ref<jhybridobject> jThis) {
+    return makeCxxInstance(jThis);
+  }
+
+  void JHybridSkeletonSpec::registerNatives() {
+    registerHybrid({
+      makeNativeMethod("initHybrid", JHybridSkeletonSpec::initHybrid),
+    });
+  }
+
+  size_t JHybridSkeletonSpec::getExternalMemorySize() noexcept {
+    static const auto method = javaClassStatic()->getMethod<jlong()>("getMemorySize");
+    return method(_javaPart);
+  }
+
+  void JHybridSkeletonSpec::dispose() noexcept {
+    static const auto method = javaClassStatic()->getMethod<void()>("dispose");
+    method(_javaPart);
+  }
+
+  std::string JHybridSkeletonSpec::toString() {
+    static const auto method = javaClassStatic()->getMethod<jni::JString()>("toString");
+    auto javaString = method(_javaPart);
+    return javaString->toStdString();
+  }
+
+  // Properties
+  std::optional<double> JHybridSkeletonSpec::getShimmerSpeed() {
+    static const auto method = javaClassStatic()->getMethod<jni::local_ref<jni::JDouble>()>("getShimmerSpeed");
+    auto __result = method(_javaPart);
+    return __result != nullptr ? std::make_optional(__result->value()) : std::nullopt;
+  }
+  void JHybridSkeletonSpec::setShimmerSpeed(std::optional<double> shimmerSpeed) {
+    static const auto method = javaClassStatic()->getMethod<void(jni::alias_ref<jni::JDouble> /* shimmerSpeed */)>("setShimmerSpeed");
+    method(_javaPart, shimmerSpeed.has_value() ? jni::JDouble::valueOf(shimmerSpeed.value()) : nullptr);
+  }
+  std::optional<std::vector<std::string>> JHybridSkeletonSpec::getShimmerGradientColors() {
+    static const auto method = javaClassStatic()->getMethod<jni::local_ref<jni::JArrayClass<jni::JString>>()>("getShimmerGradientColors");
+    auto __result = method(_javaPart);
+    return __result != nullptr ? std::make_optional([&]() {
+      size_t __size = __result->size();
+      std::vector<std::string> __vector;
+      __vector.reserve(__size);
+      for (size_t __i = 0; __i < __size; __i++) {
+        auto __element = __result->getElement(__i);
+        __vector.push_back(__element->toStdString());
+      }
+      return __vector;
+    }()) : std::nullopt;
+  }
+  void JHybridSkeletonSpec::setShimmerGradientColors(const std::optional<std::vector<std::string>>& shimmerGradientColors) {
+    static const auto method = javaClassStatic()->getMethod<void(jni::alias_ref<jni::JArrayClass<jni::JString>> /* shimmerGradientColors */)>("setShimmerGradientColors");
+    method(_javaPart, shimmerGradientColors.has_value() ? [&]() {
+      size_t __size = shimmerGradientColors.value().size();
+      jni::local_ref<jni::JArrayClass<jni::JString>> __array = jni::JArrayClass<jni::JString>::newArray(__size);
+      for (size_t __i = 0; __i < __size; __i++) {
+        const auto& __element = shimmerGradientColors.value()[__i];
+        auto __elementJni = jni::make_jstring(__element);
+        __array->setElement(__i, *__elementJni);
+      }
+      return __array;
+    }() : nullptr);
+  }
+
+  // Methods
+  
+
+} // namespace margelo::nitro::skeleton