Feat: migration to RN new architecture

RNFastImage.podspec

@@ -1,21 +1,39 @@
-require 'json'
+require "json"
 
-Pod::Spec.new do |s|
-  package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+folly_version = '2021.07.22.00'
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
+Pod::Spec.new do |s|
+  package = JSON.parse(File.read(File.join(__dir__, "package.json")))
   s.name          = "RNFastImage"
   s.version       = package['version']
   s.summary       = package['description']
   s.authors       = { "Dylan Vann" => "dylan@dylanvann.com" }
   s.homepage      = "https://github.com/DylanVann/react-native-fast-image#readme"
   s.license       = "MIT"
-  s.platforms     = { :ios => "8.0", :tvos => "9.0" }
+  s.platforms     = { :ios => "11.0", :tvos => "9.0" }
   s.framework     = 'UIKit'
   s.requires_arc  = true
   s.source        = { :git => "https://github.com/DylanVann/react-native-fast-image.git", :tag => "v#{s.version}" }
-  s.source_files  = "ios/**/*.{h,m}"
+  s.source_files    = "ios/**/*.{h,m,mm,swift}"
 
   s.dependency 'React-Core'
   s.dependency 'SDWebImage', '~> 5.11.1'
   s.dependency 'SDWebImageWebPCoder', '~> 0.8.4'
-end
+
+  s.compiler_flags  = folly_compiler_flags
+
+  s.pod_target_xcconfig    = {
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+    "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+  }
+
+  s.dependency "React-Core"
+  s.dependency "React-RCTFabric" # This is for Fabric Native Component
+  s.dependency "React-Codegen"
+  s.dependency "RCT-Folly", folly_version
+  s.dependency "RCTRequired"
+  s.dependency "RCTTypeSafety"
+  s.dependency "ReactCommon/turbomodule/core"
+end

android/build.gradle

@@ -18,13 +18,15 @@ buildscript {
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
 
 android {
-    compileSdkVersion safeExtGet('compileSdkVersion', 28)
+    compileSdkVersion safeExtGet('compileSdkVersion', 31)
     buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')
     defaultConfig {
         minSdkVersion safeExtGet('minSdkVersion', 16)
-        targetSdkVersion safeExtGet('targetSdkVersion', 28)
+        targetSdkVersion safeExtGet('targetSdkVersion', 31)
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", "true")
         versionCode 1
         versionName "1.0"
     }

android/settings.gradle

@@ -0,0 +1,2 @@
+rootProject.name = 'FastImage'
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/FastImage/FFFastImageView.h

@@ -5,9 +5,15 @@
 
 #import <React/RCTComponent.h>
 #import <React/RCTResizeMode.h>
+#import <React/RCTViewComponentView.h>
 
 #import "FFFastImageSource.h"
 
+#import <react/renderer/components/FastImageViewSpecs/ComponentDescriptors.h>
+#import <react/renderer/components/FastImageViewSpecs/EventEmitters.h>
+#import <react/renderer/components/FastImageViewSpecs/Props.h>
+#import <react/renderer/components/FastImageViewSpecs/RCTComponentViewHelpers.h>
+
 @interface FFFastImageView : SDAnimatedImageView
 
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart;

ios/FastImage/FFFastImageView.m → ios/FastImage/FFFastImageView.mm

@@ -1,8 +1,11 @@
 #import "FFFastImageView.h"
+#import "RCTFabricComponentsPlugins.h"
 #import <SDWebImage/UIImage+MultiFormat.h>
 #import <SDWebImage/UIView+WebCache.h>
 
-@interface FFFastImageView ()
+using namespace facebook::react;
+
+@interface FFFastImageView () <RCTFastImageViewViewProtocol>
 
 @property(nonatomic, assign) BOOL hasSentOnLoadStart;
 @property(nonatomic, assign) BOOL hasCompleted;
@@ -16,6 +19,11 @@ @interface FFFastImageView ()
 
 @implementation FFFastImageView
 
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<FastImageViewComponentDescriptor>();
+}
+
 - (id) init {
     self = [super init];
     self.resizeMode = RCTResizeModeCover;
@@ -203,14 +211,13 @@ - (void) reloadImage {
 }
 
 - (void) downloadImage: (FFFastImageSource*)source options: (SDWebImageOptions)options context: (SDWebImageContext*)context {
-    __weak typeof(self) weakSelf = self; // Always use a weak reference to self in blocks
     [self sd_setImageWithURL: _source.url
             placeholderImage: _defaultSource
                      options: options
                      context: context
                     progress: ^(NSInteger receivedSize, NSInteger expectedSize, NSURL* _Nullable targetURL) {
-                        if (weakSelf.onFastImageProgress) {
-                            weakSelf.onFastImageProgress(@{
+                        if (self.onFastImageProgress) {
+                            self.onFastImageProgress(@{
                                     @"loaded": @(receivedSize),
                                     @"total": @(expectedSize)
                             });
@@ -220,18 +227,18 @@ - (void) downloadImage: (FFFastImageSource*)source options: (SDWebImageOptions)o
                     SDImageCacheType cacheType,
                     NSURL* _Nullable imageURL) {
                 if (error) {
-                    weakSelf.hasErrored = YES;
-                    if (weakSelf.onFastImageError) {
-                        weakSelf.onFastImageError(@{});
+                    self.hasErrored = YES;
+                    if (self.onFastImageError) {
+                        self.onFastImageError(@{});
                     }
-                    if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                    if (self.onFastImageLoadEnd) {
+                        self.onFastImageLoadEnd(@{});
                     }
                 } else {
-                    weakSelf.hasCompleted = YES;
-                    [weakSelf sendOnLoad: image];
-                    if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                    self.hasCompleted = YES;
+                    [self sendOnLoad: image];
+                    if (self.onFastImageLoadEnd) {
+                        self.onFastImageLoadEnd(@{});
                     }
                 }
             }];
@@ -241,4 +248,99 @@ - (void) dealloc {
     [self sd_cancelCurrentImageLoad];
 }
 
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps{
+
+  const auto &oldViewProps = *std::static_pointer_cast<FastImageViewProps const>(oldProps);
+  const auto &newViewProps = *std::static_pointer_cast<FastImageViewProps const>(props);
+
+    if(oldProps==nil || oldViewProps.source.uri.compare(newViewProps.source.uri) != 0){
+        NSString *sourceStr = [NSString stringWithCString:newViewProps.source.uri.c_str() encoding:[NSString defaultCStringEncoding]];
+         NSURL *imageUrl = [[NSURL alloc] initWithString:sourceStr];
+         FFFastImageSource *imageSource = _source;
+         if(imageSource == NULL){
+             imageSource = [[FFFastImageSource alloc] init];
+         }
+        imageSource.url = imageUrl;
+        [self setSource: imageSource];
+        _needsReload = YES;
+        [self reloadImage];
+    }
+
+    if(oldProps==nil || oldViewProps.source.cache != newViewProps.source.cache){
+        FFFCacheControl cacheControl;
+        switch (newViewProps.source.cache) {
+            case FastImageViewCache::Web:
+                cacheControl = FFFCacheControl::FFFCacheControlWeb;
+                break;
+            case FastImageViewCache::CacheOnly:
+                cacheControl = FFFCacheControl::FFFCacheControlCacheOnly;
+                break;
+            case FastImageViewCache::Immutable:
+            default:
+                cacheControl = FFFCacheControl::FFFCacheControlImmutable;
+                break;
+        }
+        FFFastImageSource *imageSource = _source;
+        if(imageSource == NULL){
+            imageSource = [[FFFastImageSource alloc] init];
+        }
+       imageSource.cacheControl = cacheControl;
+       [self setSource: imageSource];
+       _needsReload = YES;
+       [self reloadImage];
+    }
+
+    if(oldProps==nil || oldViewProps.source.priority != newViewProps.source.priority){
+        FFFPriority priority;
+        switch (newViewProps.source.priority) {
+            case FastImageViewPriority::Low:
+                priority = FFFPriority::FFFPriorityLow;
+                break;
+            case FastImageViewPriority::Normal:
+                priority = FFFPriority::FFFPriorityNormal;
+                break;
+            case FastImageViewPriority::High:
+            default:
+                priority = FFFPriority::FFFPriorityHigh;
+                break;
+        }
+        FFFastImageSource *imageSource = _source;
+        if(imageSource == NULL){
+            imageSource = [[FFFastImageSource alloc] init];
+        }
+       imageSource.priority = priority;
+       [self setSource: imageSource];
+       _needsReload = YES;
+       [self reloadImage];
+    }
+
+    if(oldProps==nil || oldViewProps.resizeMode != newViewProps.resizeMode){
+        RCTResizeMode resizeMode;
+        switch (newViewProps.resizeMode) {
+            case FastImageViewResizeMode::Contain:
+                resizeMode = RCTResizeMode::RCTResizeModeContain;
+                break;
+            case FastImageViewResizeMode::Stretch:
+                resizeMode = RCTResizeMode::RCTResizeModeStretch;
+                break;
+            case FastImageViewResizeMode::Center:
+                resizeMode = RCTResizeMode::RCTResizeModeCenter;
+                break;
+            case FastImageViewResizeMode::Cover:
+            default:
+                    resizeMode = RCTResizeMode::RCTResizeModeCover;
+                break;
+        }
+        [self setResizeMode: resizeMode];
+        _needsReload = YES;
+    }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
 @end
+
+Class<RCTComponentViewProtocol> FastImageViewCls(void)
+{
+  return FFFastImageView.class;
+}

ios/FastImage/FFFastImageViewManager.m → ios/FastImage/FFFastImageViewManager.mm

@@ -4,12 +4,16 @@
 #import <SDWebImage/SDImageCache.h>
 #import <SDWebImage/SDWebImagePrefetcher.h>
 
+#import <React/RCTLog.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
+
 @implementation FFFastImageViewManager
 
 RCT_EXPORT_MODULE(FastImageView)
 
 - (FFFastImageView*)view {
-  return [[FFFastImageView alloc] init];
+  return [FFFastImageView new];
 }
 
 RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)

package.json

@@ -78,5 +78,13 @@
     "peerDependencies": {
         "react": "^17 || ^18",
         "react-native": ">=0.60.0"
+    },
+    "codegenConfig": {
+      "name": "FastImageViewSpecs",
+      "type": "all",
+      "jsSrcsDir": "./src",
+      "android": {
+        "javaPackageName": "com.dylanvann.fastimage.specs"
+      }
     }
 }

src/FastImageNativeComponent.js

@@ -0,0 +1,48 @@
+// @flow strict-local
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  Float,
+  Int32,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+type Headers = $ReadOnly<{||}>
+type Priority = WithDefault< 'low' | 'normal' | 'high', 'normal'>
+type CacheControl = WithDefault< 'immutable' | 'web' | 'cacheOnly', 'web'>
+
+type FastImageSource = $ReadOnly<{|
+    uri?: string,
+    headers?: Headers,
+    priority?: Priority,
+    cache?: CacheControl,
+|}>
+
+type OnLoadEvent = $ReadOnly<{|
+        width: Float,
+        height: Float,
+      |}>
+
+type OnProgressEvent = $ReadOnly<{|
+        loaded: Float,
+        total: Float,
+      |}>
+
+type FastImageProps = $ReadOnly<{|
+    ...ViewProps,
+    onError?: ?BubblingEventHandler<$ReadOnly<{||}>>,
+    onLoad?: ?BubblingEventHandler<OnLoadEvent>,
+    onLoadEnd?: ?BubblingEventHandler<$ReadOnly<{||}>>,
+    onLoadStart?: ?BubblingEventHandler<$ReadOnly<{||}>>,
+    onProgress?: ?BubblingEventHandler<OnProgressEvent>,
+    source?: ?FastImageSource,
+    defaultSource?: ?Int32,
+    resizeMode?:  WithDefault<'contain' | 'cover' | 'stretch' | 'center', 'cover'>,
+    fallback?: ?boolean,
+    testID?: ?string,
+|}>
+
+export default (codegenNativeComponent<FastImageProps>(
+   'FastImageView',
+): HostComponent<FastImageProps>);