feat: support both new + old arch

maitrungduc1410 · maitrungduc1410 · commit 4ddccf5e55c4 · 2025-10-20T16:57:46.000Z
diff --git a/android/build.gradle b/android/build.gradle
@@ -19,12 +19,19 @@ buildscript {
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
 
-apply plugin: "com.facebook.react"
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
 
 def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["LoaderKit_" + name]).toInteger()
 }
 
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+
 android {
   namespace "com.loaderkit"
 
@@ -33,6 +40,7 @@ android {
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
   }
 
   buildFeatures {
@@ -56,10 +64,16 @@ android {
 
   sourceSets {
     main {
-      java.srcDirs += [
-        "generated/java",
-        "generated/jni"
-      ]
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += [
+          "src/newarch",
+          // Codegen specs
+          "generated/java",
+          "generated/jni"
+        ]
+      } else {
+        java.srcDirs += "src/oldarch"
+      }
     }
   }
 }
@@ -77,8 +91,10 @@ dependencies {
   implementation "io.github.maitrungduc1410:AVLoadingIndicatorView:2.3.0"
 }
 
-react {
-  jsRootDir = file("../src/")
-  libraryName = "LoaderKitView"
-  codegenJavaPackageName = "com.loaderkit"
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "LoaderKitView"
+    codegenJavaPackageName = "com.loaderkit"
+  }
 }
diff --git a/android/src/main/java/com/loaderkit/LoaderKitView.kt b/android/src/main/java/com/loaderkit/LoaderKitView.kt
diff --git a/android/src/main/java/com/loaderkit/LoaderKitViewManager.kt b/android/src/main/java/com/loaderkit/LoaderKitViewManager.kt
@@ -2,26 +2,13 @@ package com.loaderkit
 
 import android.graphics.Color
 import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.LoaderKitViewManagerInterface
-import com.facebook.react.viewmanagers.LoaderKitViewManagerDelegate
+import com.testrncompatview.LoaderKitViewManagerSpec
 import com.wang.avi.AVLoadingIndicatorView;
 
 @ReactModule(name = LoaderKitViewManager.NAME)
-class LoaderKitViewManager : SimpleViewManager<AVLoadingIndicatorView>(),
-  LoaderKitViewManagerInterface<AVLoadingIndicatorView> {
-  private val mDelegate: ViewManagerDelegate<AVLoadingIndicatorView>
-
-  init {
-    mDelegate = LoaderKitViewManagerDelegate(this)
-  }
-
-  override fun getDelegate(): ViewManagerDelegate<AVLoadingIndicatorView>? {
-    return mDelegate
-  }
+class LoaderKitViewManager : LoaderKitViewManagerSpec<AVLoadingIndicatorView>() {
 
   override fun getName(): String {
     return NAME
@@ -32,15 +19,15 @@ class LoaderKitViewManager : SimpleViewManager<AVLoadingIndicatorView>(),
   }
 
   @ReactProp(name = "name")
-  override fun setName(view: AVLoadingIndicatorView?, name: String?) {
-    name?.let {
+  override fun setName(view: AVLoadingIndicatorView?, value: String?) {
+    value?.let {
       view?.setIndicator("${it}Indicator")
     }
   }
 
   @ReactProp(name = "color", defaultInt = Color.WHITE)
-  override fun setColor(view: AVLoadingIndicatorView?, color: Int) {
-    view?.setIndicatorColor(color)
+  override fun setColor(view: AVLoadingIndicatorView?, value: Int) {
+    view?.setIndicatorColor(value)
   }
 
   @ReactProp(name = "animationSpeedMultiplier", defaultFloat = 1f)
diff --git a/android/src/newarch/LoaderKitViewManagerSpec.kt b/android/src/newarch/LoaderKitViewManagerSpec.kt
@@ -0,0 +1,16 @@
+package com.testrncompatview
+
+import android.view.View
+
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.LoaderKitViewManagerDelegate
+import com.facebook.react.viewmanagers.LoaderKitViewManagerInterface
+
+abstract class LoaderKitViewManagerSpec<T : View> : SimpleViewManager<T>(), LoaderKitViewManagerInterface<T> {
+  private val mDelegate: ViewManagerDelegate<T> = LoaderKitViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<T>? {
+    return mDelegate
+  }
+}
diff --git a/android/src/oldarch/LoaderKitViewManagerSpec.kt b/android/src/oldarch/LoaderKitViewManagerSpec.kt
@@ -0,0 +1,10 @@
+package com.testrncompatview
+
+import android.view.View
+import com.facebook.react.uimanager.SimpleViewManager
+
+abstract class LoaderKitViewManagerSpec<T : View> : SimpleViewManager<T>() {
+  abstract fun setColor(view: T?, value: Int)
+  abstract fun setName(view: T?, value: String?)
+  abstract fun setAnimationSpeedMultiplier(view: T?, value: Float)
+}
diff --git a/example/ios/Podfile b/example/ios/Podfile
@@ -1,4 +1,4 @@
-ENV['RCT_NEW_ARCH_ENABLED'] = '1'
+ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 
 # Resolve react_native_pods.rb with node to allow for hoisting
 require Pod::Executable.execute_command('node', ['-p',
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -8,7 +8,7 @@ PODS:
   - hermes-engine (0.79.2):
     - hermes-engine/Pre-built (= 0.79.2)
   - hermes-engine/Pre-built (0.79.2)
-  - LoaderKit (0.1.0):
+  - LoaderKit (3.0.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1916,7 +1916,7 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
-  LoaderKit: d1bfefd29c001be3626e8372440eaa0fade5415c
+  LoaderKit: 984fcf908338cee4137a65115a0f44df26e9754a
   NVActivityIndicatorView-ObjC: a2394f53d84c32f71823743a2030e0378d40332f
   RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
@@ -1955,14 +1955,14 @@ SPEC CHECKSUMS:
   React-performancetimeline: abf31259d794c9274b3ea19c5016186925eec6c4
   React-RCTActionSheet: a499b0d6d9793886b67ba3e16046a3fef2cdbbc3
   React-RCTAnimation: 2595dcb10a82216a511b54742f8c28d793852ac6
-  React-RCTAppDelegate: f03604b70f57c9469a84a159d8abecf793a5bcff
+  React-RCTAppDelegate: 680583cfafce8d9d80e56d20915348a63499fc39
   React-RCTBlob: e00f9b4e2f151938f4d9864cf33ebf24ac03328a
-  React-RCTFabric: 3945d116fd271598db262d4e6ed5691d431ed9e8
-  React-RCTFBReactNativeSpec: 0f4d4f0da938101f2ca9d5333a8f46e527ad2819
+  React-RCTFabric: 39dae0812c3faae0dd5e20c31bc51d8ee7759787
+  React-RCTFBReactNativeSpec: ec90b9c2b684ab5622511618bf078fcad502690c
   React-RCTImage: dac5e9f8ec476aefe6e60ee640ebc1dfaf1a4dbe
   React-RCTLinking: 494b785a40d952a1dfbe712f43214376e5f0e408
   React-RCTNetwork: b3d7c30cd21793e268db107dd0980cb61b3c1c44
-  React-RCTRuntime: a8ff419d437228e7b8a793b14f9d711e1cbb82af
+  React-RCTRuntime: 87e560264bb9b3eb3fc621b3071353f21c7ce381
   React-RCTSettings: a060c7e381a3896104761b8eed7e284d95e37df3
   React-RCTText: 4f272b72dbb61f390d8c8274528f9fdbff983806
   React-RCTVibration: 0e5326220719aca12473d703aa46693e3b4ce67a
@@ -1983,6 +1983,6 @@ SPEC CHECKSUMS:
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 9f110fc4b7aa538663cba3c14cbb1c335f43c13f
 
-PODFILE CHECKSUM: 286c2dc2f5d707fd37bdf1c66cdd1c0526041c17
+PODFILE CHECKSUM: 6cef6942ccf18fe8e571406c1c885d224c1eb48c
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2
diff --git a/ios/LoaderKitView.h b/ios/LoaderKitView.h
@@ -1,3 +1,4 @@
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
 #import <UIKit/UIKit.h>
 
@@ -12,3 +13,12 @@ NS_ASSUME_NONNULL_BEGIN
 NS_ASSUME_NONNULL_END
 
 #endif /* LoaderKitViewNativeComponent_h */
+
+#else
+
+#import "React/RCTViewManager.h"
+
+@interface LoaderKitViewManager : RCTViewManager
+@end
+
+#endif
diff --git a/ios/LoaderKitView.mm b/ios/LoaderKitView.mm
@@ -1,4 +1,44 @@
 #import "LoaderKitView.h"
+#import "NVActivityIndicatorView.h"
+#import "React/RCTConvert.h"
+
+static const NSDictionary *nameToTypeMap = @{
+    @"BallPulse": @(NVActivityIndicatorTypeBallPulse),
+    @"BallGridPulse": @(NVActivityIndicatorTypeBallGridPulse),
+    @"BallClipRotate": @(NVActivityIndicatorTypeBallClipRotate),
+    @"SquareSpin": @(NVActivityIndicatorTypeSquareSpin),
+    @"BallClipRotatePulse": @(NVActivityIndicatorTypeBallClipRotatePulse),
+    @"BallClipRotateMultiple": @(NVActivityIndicatorTypeBallClipRotateMultiple),
+    @"BallPulseRise": @(NVActivityIndicatorTypeBallPulseRise),
+    @"BallRotate": @(NVActivityIndicatorTypeBallRotate),
+    @"CubeTransition": @(NVActivityIndicatorTypeCubeTransition),
+    @"BallZigZag": @(NVActivityIndicatorTypeBallZigZag),
+    @"BallZigZagDeflect": @(NVActivityIndicatorTypeBallZigZagDeflect),
+    @"BallTrianglePath": @(NVActivityIndicatorTypeBallTrianglePath),
+    @"BallScale": @(NVActivityIndicatorTypeBallScale),
+    @"LineScale": @(NVActivityIndicatorTypeLineScale),
+    @"LineScaleParty": @(NVActivityIndicatorTypeLineScaleParty),
+    @"BallScaleMultiple": @(NVActivityIndicatorTypeBallScaleMultiple),
+    @"BallPulseSync": @(NVActivityIndicatorTypeBallPulseSync),
+    @"BallBeat": @(NVActivityIndicatorTypeBallBeat),
+    @"LineScalePulseOut": @(NVActivityIndicatorTypeLineScalePulseOut),
+    @"LineScalePulseOutRapid": @(NVActivityIndicatorTypeLineScalePulseOutRapid),
+    @"BallScaleRipple": @(NVActivityIndicatorTypeBallScaleRipple),
+    @"BallScaleRippleMultiple": @(NVActivityIndicatorTypeBallScaleRippleMultiple),
+    @"BallSpinFadeLoader": @(NVActivityIndicatorTypeBallSpinFadeLoader),
+    @"LineSpinFadeLoader": @(NVActivityIndicatorTypeLineSpinFadeLoader),
+    @"TriangleSkewSpin": @(NVActivityIndicatorTypeTriangleSkewSpin),
+    @"Pacman": @(NVActivityIndicatorTypePacman),
+    @"BallGridBeat": @(NVActivityIndicatorTypeBallGridBeat),
+    @"SemiCircleSpin": @(NVActivityIndicatorTypeSemiCircleSpin),
+    @"BallRotateChase": @(NVActivityIndicatorTypeBallRotateChase),
+    @"Orbit": @(NVActivityIndicatorTypeOrbit),
+    @"AudioEqualizer": @(NVActivityIndicatorTypeAudioEqualizer),
+    @"CircleStrokeSpin": @(NVActivityIndicatorTypeCircleStrokeSpin),
+    @"BallDoubleBounce": @(NVActivityIndicatorTypeBallDoubleBounce)
+};
+
+#ifdef RCT_NEW_ARCH_ENABLED
 
 #import <react/renderer/components/LoaderKitViewSpec/ComponentDescriptors.h>
 #import <react/renderer/components/LoaderKitViewSpec/EventEmitters.h>
@@ -7,9 +47,6 @@
 
 #import "RCTFabricComponentsPlugins.h"
 
-#import "NVActivityIndicatorView.h"
-#import <React/RCTConvert.h>
-
 using namespace facebook::react;
 
 @interface LoaderKitView () <RCTLoaderKitViewViewProtocol>
@@ -70,50 +107,65 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 - (NVActivityIndicatorType)getIndicatorTypeFromName:(NSString *)name
 {
     if (!name) return NVActivityIndicatorTypeBallPulse;
+        
+    NSNumber *typeNumber = nameToTypeMap[name];
+    if (typeNumber) {
+        return (NVActivityIndicatorType)[typeNumber integerValue];
+    }
     
-    // Map indicator names to types (matching the Android names)
-    NSDictionary *nameToTypeMap = @{
-        @"BallPulse": @(NVActivityIndicatorTypeBallPulse),
-        @"BallGridPulse": @(NVActivityIndicatorTypeBallGridPulse),
-        @"BallClipRotate": @(NVActivityIndicatorTypeBallClipRotate),
-        @"SquareSpin": @(NVActivityIndicatorTypeSquareSpin),
-        @"BallClipRotatePulse": @(NVActivityIndicatorTypeBallClipRotatePulse),
-        @"BallClipRotateMultiple": @(NVActivityIndicatorTypeBallClipRotateMultiple),
-        @"BallPulseRise": @(NVActivityIndicatorTypeBallPulseRise),
-        @"BallRotate": @(NVActivityIndicatorTypeBallRotate),
-        @"CubeTransition": @(NVActivityIndicatorTypeCubeTransition),
-        @"BallZigZag": @(NVActivityIndicatorTypeBallZigZag),
-        @"BallZigZagDeflect": @(NVActivityIndicatorTypeBallZigZagDeflect),
-        @"BallTrianglePath": @(NVActivityIndicatorTypeBallTrianglePath),
-        @"BallScale": @(NVActivityIndicatorTypeBallScale),
-        @"LineScale": @(NVActivityIndicatorTypeLineScale),
-        @"LineScaleParty": @(NVActivityIndicatorTypeLineScaleParty),
-        @"BallScaleMultiple": @(NVActivityIndicatorTypeBallScaleMultiple),
-        @"BallPulseSync": @(NVActivityIndicatorTypeBallPulseSync),
-        @"BallBeat": @(NVActivityIndicatorTypeBallBeat),
-        @"LineScalePulseOut": @(NVActivityIndicatorTypeLineScalePulseOut),
-        @"LineScalePulseOutRapid": @(NVActivityIndicatorTypeLineScalePulseOutRapid),
-        @"BallScaleRipple": @(NVActivityIndicatorTypeBallScaleRipple),
-        @"BallScaleRippleMultiple": @(NVActivityIndicatorTypeBallScaleRippleMultiple),
-        @"BallSpinFadeLoader": @(NVActivityIndicatorTypeBallSpinFadeLoader),
-        @"LineSpinFadeLoader": @(NVActivityIndicatorTypeLineSpinFadeLoader),
-        @"TriangleSkewSpin": @(NVActivityIndicatorTypeTriangleSkewSpin),
-        @"Pacman": @(NVActivityIndicatorTypePacman),
-        @"BallGridBeat": @(NVActivityIndicatorTypeBallGridBeat),
-        @"SemiCircleSpin": @(NVActivityIndicatorTypeSemiCircleSpin),
-        @"BallRotateChase": @(NVActivityIndicatorTypeBallRotateChase),
-        @"Orbit": @(NVActivityIndicatorTypeOrbit),
-        @"AudioEqualizer": @(NVActivityIndicatorTypeAudioEqualizer),
-        @"CircleStrokeSpin": @(NVActivityIndicatorTypeCircleStrokeSpin),
-        @"BallDoubleBounce": @(NVActivityIndicatorTypeBallDoubleBounce)
-    };
+    return NVActivityIndicatorTypeBallPulse; // Default fallback
+}
+
+@end
+
+#else
+
+@implementation LoaderKitViewManager
+
+RCT_EXPORT_MODULE(LoaderKitView)
+
+- (UIView *)view
+{
+  return [[NVActivityIndicatorView alloc] init];
+}
+
+- (NVActivityIndicatorType)getIndicatorTypeFromName:(NSString *)name
+{
+    if (!name) return NVActivityIndicatorTypeBallPulse;
     
     NSNumber *typeNumber = nameToTypeMap[name];
     if (typeNumber) {
         return (NVActivityIndicatorType)[typeNumber integerValue];
     }
     
-    return NVActivityIndicatorTypeBallPulse; // Default fallback
+    return NVActivityIndicatorTypeBallPulse;
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(name, NSString, NVActivityIndicatorView)
+{
+    NSString *indicatorName = [RCTConvert NSString:json];
+    if (indicatorName) {
+        NVActivityIndicatorType type = [self getIndicatorTypeFromName:indicatorName];
+        view.type = type;
+    }
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(color, UIColor, NVActivityIndicatorView)
+{
+    UIColor *color = [RCTConvert UIColor:json];
+    if (color) {
+        view.color = color;
+    }
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(animationSpeedMultiplier, CGFloat, NVActivityIndicatorView)
+{
+    CGFloat speedMultiplier = [RCTConvert CGFloat:json];
+    view.animationSpeedMultiplier = speedMultiplier;
 }
 
 @end
+
+#endif
+
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-loader-kit",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "🎯 Beautiful native loading indicators for React Native with 30+ animations, TypeScript support, and speed control",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-ENV['RCT_NEW_ARCH_ENABLED'] = '1'`
	`1`	`+ENV['RCT_NEW_ARCH_ENABLED'] = '0'`
`2`	`2`
`3`	`3`	`# Resolve react_native_pods.rb with node to allow for hoisting`
`4`	`4`	`require Pod::Executable.execute_command('node', ['-p',`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-loader-kit",`
`3`		`- "version": "3.0.0",`
	`3`	`+ "version": "4.0.0",`
`4`	`4`	`"description": "🎯 Beautiful native loading indicators for React Native with 30+ animations, TypeScript support, and speed control",`
`5`	`5`	`"main": "./lib/module/index.js",`
`6`	`6`	`"types": "./lib/typescript/src/index.d.ts",`