feat: Add Fabric support (#493)

* build(deps): update react-native

* feat: codegen setup for BlurView component

* feat: add basic Fabric component for BlurView (iOS)

* feat(iOS): implement updateProps Fabric method

* feat(iOS): migrate VibrancyView

* feat(Android): add code for new and old architecture

* chore: update dependencies and example app

* fix(iOS): interface VibrancyViewComponentView

* refactor: separate codegen specs by platform

* refactor: rename Android component file to avoid a bug in Codegen

* refactor: delete/rename files

* refactor: conditionally include Fabric code in the original views

* refactor: remove unnecessary code in build.gradle

Author: gispada

android/build.gradle

@@ -49,6 +49,16 @@ android {
     sourceCompatibility JavaVersion.VERSION_1_8
     targetCompatibility JavaVersion.VERSION_1_8
   }
+
+  sourceSets {
+    main {
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += ['src/newarch']
+      } else {
+        java.srcDirs += ['src/oldarch']
+      }
+    }
+  }
 }
 
 repositories {
@@ -130,11 +140,3 @@ dependencies {
 
   implementation 'com.github.Dimezis:BlurView:version-2.0.2'
 }
-
-if (isNewArchitectureEnabled()) {
-  react {
-    jsRootDir = file("../src/")
-    libraryName = "Blur"
-    codegenJavaPackageName = "com.reactnativecommunityblur"
-  }
-}

android/src/main/java/com/reactnativecommunity/blurview/BlurViewManager.java renamed to android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java

@@ -5,8 +5,6 @@
 import android.view.View;
 import android.view.ViewGroup;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.annotations.ReactProp;
 
 import eightbitlab.com.blurview.BlurView;
 import eightbitlab.com.blurview.RenderEffectBlur;
@@ -16,20 +14,14 @@
 import javax.annotation.Nonnull;
 
 @SuppressWarnings("unused")
-class BlurViewManager extends ViewGroupManager<BlurView> {
+class BlurViewManagerImpl {
 
-  private static final String REACT_CLASS = "BlurView";
+  public static final String REACT_CLASS = "AndroidBlurView";
 
-  private static final int defaultRadius = 10;
-  private static final int defaultSampling = 10;
+  public static final int defaultRadius = 10;
+  public static final int defaultSampling = 10;
 
-  @Override
-  public @Nonnull String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  public @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
+  public static @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
     BlurView blurView = new BlurView(ctx);
     View decorView = Objects
       .requireNonNull(ctx.getCurrentActivity())
@@ -51,29 +43,24 @@ class BlurViewManager extends ViewGroupManager<BlurView> {
     return blurView;
   }
 
-  @ReactProp(name = "blurRadius", defaultInt = defaultRadius)
-  public void setRadius(BlurView view, int radius) {
+  public static void setRadius(BlurView view, int radius) {
     view.setBlurRadius(radius);
     view.invalidate();
   }
 
-  @ReactProp(name = "overlayColor", customType = "Color")
-  public void setColor(BlurView view, int color) {
+  public static void setColor(BlurView view, int color) {
     view.setOverlayColor(color);
     view.invalidate();
   }
 
-  @ReactProp(name = "downsampleFactor", defaultInt = defaultSampling)
-  public void setDownsampleFactor(BlurView view, int factor) {}
+  public static void setDownsampleFactor(BlurView view, int factor) {}
 
-  @ReactProp(name = "autoUpdate", defaultBoolean = true)
-  public void setAutoUpdate(BlurView view, boolean autoUpdate) {
+  public static void setAutoUpdate(BlurView view, boolean autoUpdate) {
     view.setBlurAutoUpdate(autoUpdate);
     view.invalidate();
   }
 
-  @ReactProp(name = "enabled", defaultBoolean = true)
-  public void setBlurEnabled(BlurView view, boolean enabled) {
+  public static void setBlurEnabled(BlurView view, boolean enabled) {
     view.setBlurEnabled(enabled);
   }
 }

android/src/main/java/com/reactnativecommunity/blurview/BlurViewPackage.java

@@ -30,6 +30,6 @@ public List<Class<? extends JavaScriptModule>> createJSModules() {
   public List<ViewManager> createViewManagers(
     @Nonnull ReactApplicationContext reactContext
   ) {
-    return Collections.<ViewManager>singletonList(new BlurViewManager());
+    return Collections.<ViewManager>singletonList(new BlurViewManager(reactContext));
   }
 }

android/src/newarch/java/com/reactnativecommunity/blurview/BlurViewManager.java

@@ -0,0 +1,78 @@
+package com.reactnativecommunity.blurview;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.viewmanagers.AndroidBlurViewManagerDelegate;
+import com.facebook.react.viewmanagers.AndroidBlurViewManagerInterface;
+
+import eightbitlab.com.blurview.BlurView;
+
+@ReactModule(name = BlurViewManagerImpl.REACT_CLASS)
+class BlurViewManager extends ViewGroupManager<BlurView>
+    implements AndroidBlurViewManagerInterface<BlurView> {
+
+  private final ViewManagerDelegate<BlurView> mDelegate;
+
+  public BlurViewManager(ReactApplicationContext context) {
+    mDelegate = new AndroidBlurViewManagerDelegate<>(this);
+  }
+
+  @Nullable
+  @Override
+  protected ViewManagerDelegate<BlurView> getDelegate() {
+    return mDelegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return BlurViewManagerImpl.REACT_CLASS;
+  }
+
+  @NonNull
+  @Override
+  protected BlurView createViewInstance(@NonNull ThemedReactContext context) {
+    return BlurViewManagerImpl.createViewInstance(context);
+  }
+
+  @Override
+  @ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius)
+  public void setBlurRadius(BlurView view, int radius) {
+    BlurViewManagerImpl.setRadius(view, radius);
+  }
+
+  @Override
+  @ReactProp(name = "overlayColor", customType = "Color")
+  public void setOverlayColor(BlurView view, Integer color) {
+    BlurViewManagerImpl.setColor(view, color);
+  }
+
+  @Override
+  @ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling)
+  public void setDownsampleFactor(BlurView view, int factor) {}
+
+  @Override
+  @ReactProp(name = "autoUpdate", defaultBoolean = true)
+  public void setAutoUpdate(BlurView view, boolean autoUpdate) {
+    BlurViewManagerImpl.setAutoUpdate(view, autoUpdate);
+  }
+
+  @Override
+  @ReactProp(name = "enabled", defaultBoolean = true)
+  public void setEnabled(BlurView view, boolean enabled) {
+    BlurViewManagerImpl.setBlurEnabled(view, enabled);
+  }
+
+  @Override
+  public void setBlurAmount(BlurView view, int value) {}
+
+  @Override
+  public void setBlurType(BlurView view, @Nullable String value) {}
+}

android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java

@@ -0,0 +1,53 @@
+package com.reactnativecommunity.blurview;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import eightbitlab.com.blurview.BlurView;
+
+class BlurViewManager extends ViewGroupManager<BlurView> {
+
+  ReactApplicationContext mCallerContext;
+
+  public BlurViewManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public BlurView createViewInstance(ThemedReactContext context) {
+    return BlurViewManagerImpl.createViewInstance(context);
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return BlurViewManagerImpl.REACT_CLASS;
+  }
+
+  @ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius)
+  public void setRadius(BlurView view, int radius) {
+    BlurViewManagerImpl.setRadius(view, radius);
+  }
+
+  @ReactProp(name = "overlayColor", customType = "Color")
+  public void setColor(BlurView view, int color) {
+    BlurViewManagerImpl.setColor(view, color);
+  }
+
+  @ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling)
+  public void setDownsampleFactor(BlurView view, int factor) {}
+
+  @ReactProp(name = "autoUpdate", defaultBoolean = true)
+  public void setAutoUpdate(BlurView view, boolean autoUpdate) {
+    BlurViewManagerImpl.setAutoUpdate(view, autoUpdate);
+  }
+
+  @ReactProp(name = "enabled", defaultBoolean = true)
+  public void setBlurEnabled(BlurView view, boolean enabled) {
+    BlurViewManagerImpl.setBlurEnabled(view, enabled);
+  }
+}

example/ios/Podfile

@@ -4,4 +4,4 @@ use_flipper!
 
 workspace 'BlurExample.xcworkspace'
 
-use_test_app!
+use_test_app! :hermes_enabled => true