feat: drop SDWebImage, implement svg decoder (#427)

* feat: drop sdwebimage, implement svg decoder

* fix: properly retrive RCTImageLoader

* fix: simplify the svg decoder

* fix: remove static frameworks from expo template

* fix: retain cycle

Author: okwasniewski

.changeset/sour-cases-appear.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': minor
+---
+
+feat: drop SDWebImage, resolve bunch of build issues

CONTRIBUTING.md

@@ -39,15 +39,7 @@ To run the React Native example app on Android:
 yarn workspace react-native-bottom-tabs-example android
 ```
 
-To run the React Native example app on iOS:
-
-Make sure to install [`cocoapods-swift-modular-headers`](https://github.com/callstack/cocoapods-swift-modular-headers) gem, otherwise `pod install` will fail.
-
-```sh
-gem install cocoapods-swift-modular-headers
-```
-
-Next you can install cocoapods.
+To run the React Native example app on iOS, you need to install cocoapods.
 
 ```sh
 cd apps/example/ios

apps/example/ios/Podfile

@@ -1,4 +1,4 @@
-plugin 'cocoapods-swift-modular-headers'
+ENV['RCT_NEW_ARCH_ENABLED'] = '1'
 
 ws_dir = Pathname.new(__dir__)
 ws_dir = ws_dir.parent until
@@ -8,6 +8,4 @@ require "#{ws_dir}/node_modules/react-native-test-app/test_app.rb"
 
 workspace 'ReactNativeBottomTabsExample.xcworkspace'
 
-apply_modular_headers_for_swift_dependencies()
-
 use_test_app! :hermes_enabled => true, :fabric_enabled => true

apps/example/ios/Podfile.lock

@@ -1748,7 +1748,37 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-bottom-tabs (0.11.1):
+  - react-native-bottom-tabs (0.11.2):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - react-native-bottom-tabs/common (= 0.11.2)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - SwiftUIIntrospect (~> 1.0)
+    - Yoga
+  - react-native-bottom-tabs/common (0.11.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -1774,8 +1804,6 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SDWebImage (>= 5.19.1)
-    - SDWebImageSVGCoder (>= 1.7.0)
     - SocketRocket
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
@@ -2520,11 +2548,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - SDWebImage (5.21.1):
-    - SDWebImage/Core (= 5.21.1)
-  - SDWebImage/Core (5.21.1)
-  - SDWebImageSVGCoder (1.8.0):
-    - SDWebImage/Core (~> 5.6)
   - SocketRocket (0.7.1)
   - SwiftUIIntrospect (1.3.0)
   - Yoga (0.0.0)
@@ -2614,8 +2637,6 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
-    - SDWebImage
-    - SDWebImageSVGCoder
     - SocketRocket
     - SwiftUIIntrospect
 
@@ -2821,7 +2842,7 @@ SPEC CHECKSUMS:
   React-logger: a3cb5b29c32b8e447b5a96919340e89334062b48
   React-Mapbuffer: 9d2434a42701d6144ca18f0ca1c4507808ca7696
   React-microtasksnativemodule: 75b6604b667d297292345302cc5bfb6b6aeccc1b
-  react-native-bottom-tabs: fa973f009e321d7d11dbdb761192ce185948a05a
+  react-native-bottom-tabs: d71dd2e1b69f11d3ed2da2db23016ebdc77f4ba1
   react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d
@@ -2859,12 +2880,10 @@ SPEC CHECKSUMS:
   RNGestureHandler: 3a73f098d74712952870e948b3d9cf7b6cae9961
   RNScreens: 0bbf16c074ae6bb1058a7bf2d1ae017f4306797c
   RNVectorIcons: c13cc1db346e960ecd0aafcdd5d0bb458133b9c1
-  SDWebImage: f29024626962457f3470184232766516dee8dfea
-  SDWebImageSVGCoder: 8e10c8f6cc879c7dfb317b284e13dd589379f01c
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
   Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
 
-PODFILE CHECKSUM: e4dd5fac8fa6e00534aac80dc857efbb13ef2723
+PODFILE CHECKSUM: d61a3255405492afdb755f6ddd335fd0f5a84cd3
 
 COCOAPODS: 1.16.2

docs/docs/docs/getting-started/quick-start.mdx

@@ -19,38 +19,6 @@ If you are going to use [React Navigation / Expo Router Integration](/docs/guide
 
 <PackageManagerTabs command="install @bottom-tabs/react-navigation" />
 
-<details>
-  <summary>If you use React Native <b>version 0.75 or lower</b></summary>
-
-- For `@react-native-community/cli` users, open Podfile in ios folder and change minimum iOS version to `14.0` before `pod install`
-
-```diff
-- platform :ios, min_ios_version_supported
-+ platform :ios, '14.0'
-```
-
-- For Expo users, install `expo-build-properties`, open app.json file and update `deploymentTarget` for `ios` as below
-
-```json
-{
-  "expo": {
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-          "ios": {
-            "deploymentTarget": "14.0"
-          }
-        }
-      ]
-    ],
-  }
-}
-```
-
-</details>
-
-
 
 ### Expo
 
@@ -64,53 +32,6 @@ Add the library plugin in your `app.json` config file and [create a new build](h
 }
 ```
 
-Then install `expo-build-properties` to enable static linking for iOS by adding `"useFrameworks": "static"` in the plugin.
-
-```sh
-npx expo install expo-build-properties
-```
-
-```diff
-{
-  "expo": {
-    "plugins": [
-       "react-native-bottom-tabs",
-+      [
-+        "expo-build-properties",
-+        {
-+          "ios": {
-+            "useFrameworks": "static"
-+          }
-+        }
-+      ]
-+    ]
-  }
-}
-```
-
-Alternatively, you can avoid enabling static linking (which can cause problems with your existing packages) by adding the following in the `expo-build-properties` plugin.
-
-```diff
-{
-  "expo": {
-    "plugins": [
-       "react-native-bottom-tabs",
-+      [
-+        "expo-build-properties",
-+        {
-+          "ios": {
-+            "extraPods": [
-+              { name: "SDWebImage", modular_headers: true }, // Work around for not enabling static framework, required for react-native-bottom-tabs
-+              { name: "SDWebImageSVGCoder", modular_headers: true }
-+            ]
-+          }
-+        }
-+      ]
-+    ]
-  }
-}
-```
-
 :::warning
 
 This library is not supported in [Expo Go](https://expo.dev/go).
@@ -133,12 +54,6 @@ Edit `android/app/src/main/res/values/styles.xml` to inherit from provided theme
 
 Here you can read more about [Android Native Styling](/docs/guides/android-native-styling).
 
-To enable static linking for iOS, Open the `./ios/Podfile` file and add the following:
-
-```ruby
-use_frameworks! :linkage => :static
-```
-
 
 ## Example usage
 

packages/expo-template/app.json

@@ -33,14 +33,6 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ],
-      [
-        "expo-build-properties",
-        {
-          "ios": {
-            "useFrameworks": "static"
-          }
-        }
       ]
     ],
     "experiments": {

packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewComponentDescriptor.h

@@ -0,0 +1,33 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/components/RNCTabView/RNCTabViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+class RNCTabViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNCTabViewShadowNode> {
+ public:
+    using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode& shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+
+#if !defined(ANDROID)
+    auto &tabViewShadowNode =
+        static_cast<RNCTabViewShadowNode&>(shadowNode);
+
+    std::weak_ptr<void> imageLoader =
+        contextContainer_->at<std::shared_ptr<void>>("RCTImageLoader");
+    tabViewShadowNode.setImageLoader(imageLoader);
+#endif
+  }
+};
+
+
+} // namespace facebook::react
+
+#endif

packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewShadowNode.cpp

@@ -0,0 +1,19 @@
+#include <react/renderer/components/RNCTabView/RNCTabViewShadowNode.h>
+
+namespace facebook::react {
+
+extern const char RNCTabViewComponentName[] = "RNCTabView";
+
+void RNCTabViewShadowNode::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  getStateDataMutable().setImageLoader(imageLoader);
+}
+
+RNCTabViewShadowNode::StateData &
+RNCTabViewShadowNode::getStateDataMutable() {
+  ensureUnsealed();
+  return const_cast<RNCTabViewShadowNode::StateData &>(getStateData());
+}
+
+
+} // namespace facebook::react

packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewShadowNode.h

@@ -0,0 +1,35 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/components/RNCTabView/EventEmitters.h>
+#include <react/renderer/components/RNCTabView/Props.h>
+#include <react/renderer/components/RNCTabView/RNCTabViewState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char RNCTabViewComponentName[];
+
+/*
+ * `ShadowNode` for <RNCTabView> component.
+ */
+class JSI_EXPORT RNCTabViewShadowNode final: public ConcreteViewShadowNode<
+RNCTabViewComponentName,
+RNCTabViewProps,
+RNCTabViewEventEmitter,
+RNCTabViewState> {
+  
+public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+  
+  void setImageLoader(std::weak_ptr<void> imageLoader);
+  
+  StateData &getStateDataMutable();
+};
+
+}
+
+#endif

packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewState.cpp

@@ -0,0 +1,15 @@
+#include <react/renderer/components/RNCTabView/RNCTabViewState.h>
+
+namespace facebook::react {
+
+void RNCTabViewState::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  imageLoader_ = imageLoader;
+}
+
+std::weak_ptr<void> RNCTabViewState::getImageLoader()
+    const noexcept {
+  return imageLoader_;
+}
+
+} // namespace facebook::react