@onekeyfe/react-native-bottom-tabs 0.0.0-stage → 6.7.0-7

package/docs/SPEC.md

@@ -0,0 +1,104 @@
+# Native Tab View behavioral contract
+
+## Tab presses and double press
+
+Status: implemented in module source. Runtime verification status is recorded
+under Conformance and acceptance.
+
+Every tab press that the native tab bar accepts emits `onPageSelected` with the
+tab key, including a press on the already selected tab (reselection). A
+reselection never changes the selected page. A tab with `preventsDefault` emits
+`onPageSelected` but keeps the current page selected.
+
+`onTabDoublePress` fires when two consecutive accepted presses target the same
+tab within the platform double-tap timeout (iOS 0.3 s; Android
+`ViewConfiguration.getDoubleTapTimeout()`, 300 ms by default). Both presses still
+emit `onPageSelected` first; the double press is an additional event, emitted
+after the second press. After it fires, tracking resets, so a third quick press
+starts a new pair. Double press is derived from accepted selections only: no
+extra gesture recognizer is attached and single-press latency is unchanged.
+JS-driven `selectedPage` changes do not count as presses.
+
+Tab long press is not supported. The former `onTabLongPress` prop/event and the
+native long-press recognizers were removed.
+
+## iOS native tab bar gestures
+
+The iOS tab bar keeps UIKit's own gesture handling. On iOS 26 this includes the
+Liquid Glass press-and-drag selection: pressing a tab lifts the lens and dragging
+scrubs across tabs, selecting on release through the normal
+`tabBarController(_:shouldSelect:)` path. The module MUST NOT install recognizers
+that delay, cancel, or require failure of the system tab bar gestures.
+
+The previous drag-cancellation guard (which refused selection for any touch that
+moved more than 10 points) was removed because it disabled drag-to-switch.
+
+## Android tab bar style
+
+`androidTabBarStyle` selects the Android presentation; iOS ignores it.
+
+- `default` (default): Material `BottomNavigationView` docked at the bottom,
+  unchanged behavior.
+- `floating`: a capsule bar modeled on the iOS 26 tab bar. Scene content extends
+  underneath it.
+
+Floating geometry (dp): bar height 62, side margin 20 plus the navigation-bar
+side insets, bottom gap `max(bottomInset, 20) + 4`, fully rounded corners. The
+bottom inset is the navigation-bar inset (0 when `ignoreBottomInsets`) or the
+keyboard inset when `ignoreKeyboardInsets` is false, whichever is larger. Icons
+are 26, labels 10 sp in both states unless `fontSize` is set, and item content is
+vertically centered. The reported tab bar height is the bar height plus its
+bottom gap, or 0 while hidden.
+
+Floating appearance: the bar surface is `barTintColor` (or the theme background)
+at 95% opacity (lightened slightly for dark colors), with
+a hairline rim and an outline shadow. Android has no system backdrop material,
+so no blur is applied. The selected tab sits on a capsule pill inset 4 dp
+(`activeIndicatorColor` when provided). The Material ripple is disabled; the
+lens provides press feedback.
+
+Floating interaction (single finger; motion splitting is disabled):
+
+1. Touch down on any tab moves the pill to that tab and lifts it into a lens
+   (grows past the bar edges, gains a rim) and magnifies that tab's content.
+2. Movement beyond touch slop starts a drag: the lens follows the finger with
+   edge resistance and stretches with velocity; the tab nearest the lens center
+   becomes the candidate, is magnified, and ticks haptically when it changes.
+   No page change or event happens during the drag.
+3. Release without drag performs the tab's click (selection or reselection).
+   Release displacement is also checked against touch slop, including when no
+   MOVE was delivered or the last MOVE remained within slop. If release crosses
+   slop, it starts a drag and updates the candidate from the release position.
+   Release after a drag selects the candidate once, only if it differs from the
+   current tab. Cancel selects nothing.
+4. The lens then settles back into the pill on the selected tab, which stays on
+   the old tab for cancelled or `preventsDefault` presses.
+
+JS-driven selection changes slide the pill with a spring and velocity stretch.
+Switching style at runtime rebuilds the bar and restores Material's label sizes,
+icon size, ripple, padding, and gravity when returning to `default`.
+
+## Threading and ownership
+
+All gesture handling, animations, and timers run on the platform UI thread in
+the main-runtime native view. The view owns no background-runtime or shared JS
+objects. Retained state is bounded to the current touch sequence, the last
+pressed tab and timestamp, and at most two running animators.
+
+## Conformance and acceptance
+
+Implementation:
+- iOS: `ios/RCTBottomTabsContainerView.swift` (`shouldSelectTab`,
+  `emitDoublePressIfNeeded`), `ios/RCTBottomTabsComponentView.mm` event forwarding.
+- Android: `android/src/main/java/com/onekey/bottomtabs/BottomTabsView.kt` (floating
+  layout, `handleFloatingTabTouch`, `emitDoublePressIfNeeded`),
+  `FloatingTabBarStyle.kt`, `events/TabDoublePressEvent.kt`.
+
+Required runtime cases per platform: stationary tap selects; reselect emits
+`onPageSelected` without page change; two quick taps on one tab emit
+`onTabDoublePress` exactly once; slow taps do not. iOS 26: press-and-drag across
+tabs selects the tab under the finger on release. Android floating: press on a
+non-selected tab lifts the lens there; drag crossing tab centers does not change
+pages; release selects the nearest tab once; cancel restores; hidden bar, dark
+mode, and 3-button navigation insets lay out correctly. Source compilation is
+recorded separately from runtime acceptance.

package/ios/Extensions.swift

@@ -0,0 +1,46 @@
+import UIKit
+
+extension Collection {
+  subscript(safe index: Index) -> Element? {
+    indices.contains(index) ? self[index] : nil
+  }
+}
+
+extension Collection where Element == TabItem {
+  func findByKey(_ key: String?) -> Element? {
+    guard let key else { return nil }
+    guard !isEmpty else { return nil }
+    return first { $0.key == key }
+  }
+}
+
+extension UIView {
+  func pinEdges(to other: UIView) {
+    NSLayoutConstraint.activate([
+      leadingAnchor.constraint(equalTo: other.leadingAnchor),
+      trailingAnchor.constraint(equalTo: other.trailingAnchor),
+      topAnchor.constraint(equalTo: other.topAnchor),
+      bottomAnchor.constraint(equalTo: other.bottomAnchor)
+    ])
+  }
+}
+
+extension UIImage {
+  func resizeImageTo(size: CGSize) -> UIImage? {
+    let renderer = UIGraphicsImageRenderer(size: size)
+    return renderer.image { _ in
+      self.draw(in: CGRect(origin: .zero, size: size))
+    }
+  }
+}
+
+extension UIColor {
+  convenience init(rgb: Int) {
+    self.init(
+      red: CGFloat((rgb >> 16) & 0xFF) / 255.0,
+      green: CGFloat((rgb >> 8) & 0xFF) / 255.0,
+      blue: CGFloat(rgb & 0xFF) / 255.0,
+      alpha: CGFloat((rgb >> 24) & 0xFF) / 255.0
+    )
+  }
+}

package/ios/RCTBottomAccessoryComponentView.h

@@ -0,0 +1,12 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTBottomAccessoryComponentView: RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/RCTBottomAccessoryComponentView.mm

@@ -0,0 +1,67 @@
+#import "RCTBottomAccessoryComponentView.h"
+
+#import <react/renderer/components/RNBottomTabs/ComponentDescriptors.h>
+#import <react/renderer/components/RNBottomTabs/EventEmitters.h>
+#import <react/renderer/components/RNBottomTabs/Props.h>
+#import <react/renderer/components/RNBottomTabs/RCTComponentViewHelpers.h>
+
+#import <React/RCTFabricComponentsPlugins.h>
+
+#if __has_include(<BottomTabsModule/BottomTabsModule-Swift.h>)
+#import <BottomTabsModule/BottomTabsModule-Swift.h>
+#elif __has_include("BottomTabsModule/BottomTabsModule-Swift.h")
+#import "BottomTabsModule/BottomTabsModule-Swift.h"
+#elif __has_include("BottomTabsModule-Swift.h")
+#import "BottomTabsModule-Swift.h"
+#else
+#import "react_native_bottom_tabs-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@implementation RCTBottomAccessoryComponentView {
+  UIView *_accessoryView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<RNBottomTabsAccessoryViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNBottomTabsAccessoryViewProps>();
+    _props = defaultProps;
+
+    Class containerClass = NSClassFromString(@"BottomTabsModule.RCTBottomAccessoryContainerView");
+    if (!containerClass) {
+      containerClass = NSClassFromString(@"RCTBottomAccessoryContainerView");
+    }
+    _accessoryView = [[containerClass alloc] init];
+    self.contentView = _accessoryView;
+  }
+
+  return self;
+}
+
+- (void)setFrame:(CGRect)frame
+{
+  [super setFrame:frame];
+  if (frame.size.width > 0 && frame.size.height > 0) {
+    auto eventEmitter = std::static_pointer_cast<const RNBottomTabsAccessoryViewEventEmitter>(_eventEmitter);
+    if (eventEmitter) {
+      eventEmitter->onNativeLayout(RNBottomTabsAccessoryViewEventEmitter::OnNativeLayout {
+        .width = frame.size.width,
+        .height = frame.size.height
+      });
+    }
+  }
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNBottomTabsAccessoryViewCls(void)
+{
+  return RCTBottomAccessoryComponentView.class;
+}

package/ios/RCTBottomAccessoryContainerView.swift

@@ -0,0 +1,51 @@
+import Foundation
+import UIKit
+import React
+
+extension Notification.Name {
+  static let bottomAccessoryPlacementChanged = Notification.Name("bottomAccessoryPlacementChanged")
+}
+
+class RCTBottomAccessoryContainerView: UIView {
+
+  // MARK: - Events
+  @objc var onNativeLayout: RCTDirectEventBlock?
+  @objc var onPlacementChanged: RCTDirectEventBlock?
+
+  // MARK: - Init
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(handlePlacementNotification(_:)),
+      name: .bottomAccessoryPlacementChanged,
+      object: nil
+    )
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
+  }
+
+  // MARK: - Layout
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    let bounds = self.bounds
+    guard bounds.width > 0 && bounds.height > 0 else { return }
+    onNativeLayout?(["width": Double(bounds.width), "height": Double(bounds.height)])
+  }
+
+  // MARK: - Placement
+
+  @objc private func handlePlacementNotification(_ notification: Notification) {
+    guard let placement = notification.userInfo?["placement"] as? String else { return }
+    onPlacementChanged?(["placement": placement])
+  }
+}

package/ios/RCTBottomTabsComponentView.h

@@ -0,0 +1,12 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTBottomTabsComponentView: RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/RCTBottomTabsComponentView.mm

@@ -0,0 +1,338 @@
+#import "RCTBottomTabsComponentView.h"
+
+#import <react/renderer/components/RNBottomTabs/RNBottomTabsViewComponentDescriptor.h>
+#import <react/renderer/components/RNBottomTabs/EventEmitters.h>
+#import <react/renderer/components/RNBottomTabs/Props.h>
+#import <react/renderer/components/RNBottomTabs/RCTComponentViewHelpers.h>
+
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTConversions.h>
+#import <React/RCTImageLoader.h>
+#import <React/RCTImageSource.h>
+#import <React/RCTBridge+Private.h>
+#import <react/utils/ManagedObjectWrapper.h>
+
+#if __has_include(<BottomTabsModule/BottomTabsModule-Swift.h>)
+#import <BottomTabsModule/BottomTabsModule-Swift.h>
+#elif __has_include("BottomTabsModule/BottomTabsModule-Swift.h")
+#import "BottomTabsModule/BottomTabsModule-Swift.h"
+#elif __has_include("BottomTabsModule-Swift.h")
+#import "BottomTabsModule-Swift.h"
+#else
+#import "react_native_bottom_tabs-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+static inline NSString* _Nullable NSStringFromStdStringNilIfEmpty(const std::string &string) {
+  return string.empty() ? nil : [NSString stringWithUTF8String:string.c_str()];
+}
+
+// Overload `==` and `!=` operators for `RNBottomTabsViewItemsStruct`
+namespace facebook::react {
+
+bool operator==(const RNBottomTabsViewItemsStruct& lhs, const RNBottomTabsViewItemsStruct& rhs) {
+  return lhs.key == rhs.key &&
+  lhs.title == rhs.title &&
+  lhs.sfSymbol == rhs.sfSymbol &&
+  lhs.badge == rhs.badge &&
+  lhs.activeTintColor == rhs.activeTintColor &&
+  lhs.hidden == rhs.hidden &&
+  lhs.testID == rhs.testID &&
+  lhs.role == rhs.role &&
+  lhs.preventsDefault == rhs.preventsDefault;
+}
+
+bool operator!=(const RNBottomTabsViewItemsStruct& lhs, const RNBottomTabsViewItemsStruct& rhs) {
+  return !(lhs == rhs);
+}
+
+}
+
+static NSNumber* _Nullable colorToProcessedInt(const SharedColor &color) {
+  UIColor *uiColor = RCTUIColorFromSharedColor(color);
+  if (!uiColor) return nil;
+  CGFloat r, g, b, a;
+  [uiColor getRed:&r green:&g blue:&b alpha:&a];
+  int32_t colorInt = ((int)(a * 255) << 24) | ((int)(r * 255) << 16) | ((int)(g * 255) << 8) | (int)(b * 255);
+  return @(colorInt);
+}
+
+static NSArray<NSDictionary *>* convertItemsToArray(const std::vector<RNBottomTabsViewItemsStruct>& items) {
+  NSMutableArray *result = [NSMutableArray arrayWithCapacity:items.size()];
+
+  for (const auto& item : items) {
+    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
+    dict[@"key"] = [NSString stringWithUTF8String:item.key.c_str()];
+    dict[@"title"] = [NSString stringWithUTF8String:item.title.c_str()];
+
+    if (!item.sfSymbol.empty()) {
+      dict[@"sfSymbol"] = [NSString stringWithUTF8String:item.sfSymbol.c_str()];
+    }
+    if (!item.badge.empty()) {
+      dict[@"badge"] = [NSString stringWithUTF8String:item.badge.c_str()];
+    }
+
+    NSNumber *activeTint = colorToProcessedInt(item.activeTintColor);
+    if (activeTint) dict[@"activeTintColor"] = activeTint;
+
+    NSNumber *badgeBg = colorToProcessedInt(item.badgeBackgroundColor);
+    if (badgeBg) dict[@"badgeBackgroundColor"] = badgeBg;
+
+    NSNumber *badgeTxt = colorToProcessedInt(item.badgeTextColor);
+    if (badgeTxt) dict[@"badgeTextColor"] = badgeTxt;
+
+    dict[@"hidden"] = @(item.hidden);
+    dict[@"preventsDefault"] = @(item.preventsDefault);
+
+    if (!item.testID.empty()) {
+      dict[@"testID"] = [NSString stringWithUTF8String:item.testID.c_str()];
+    }
+    if (!item.role.empty()) {
+      dict[@"role"] = [NSString stringWithUTF8String:item.role.c_str()];
+    }
+
+    [result addObject:dict];
+  }
+
+  return result;
+}
+
+@interface RCTBottomTabsComponentView () <RCTRNBottomTabsViewViewProtocol>
+@end
+
+@implementation RCTBottomTabsComponentView {
+  UIView *_containerView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<RNBottomTabsViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNBottomTabsViewProps>();
+    _props = defaultProps;
+
+    Class containerClass = NSClassFromString(@"BottomTabsModule.RCTBottomTabsContainerView");
+    if (!containerClass) {
+      containerClass = NSClassFromString(@"RCTBottomTabsContainerView");
+    }
+    _containerView = [[containerClass alloc] init];
+    self.contentView = _containerView;
+
+    // Set up event forwarding from Swift container to Fabric EventEmitter.
+    // Swift container uses RCTDirectEventBlock (void (^)(NSDictionary *)) for events,
+    // but in Fabric mode we need to forward them through the C++ EventEmitter.
+    typedef void (^EventBlock)(NSDictionary *);
+    __weak auto weakSelf = self;
+
+    EventBlock onPageSelected = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onPageSelected({.key = std::string([[body objectForKey:@"key"] UTF8String] ?: "")});
+      }
+    };
+    [_containerView setValue:onPageSelected forKey:@"onPageSelected"];
+
+    EventBlock onTabDoublePress = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onTabDoublePress({.key = std::string([[body objectForKey:@"key"] UTF8String] ?: "")});
+      }
+    };
+    [_containerView setValue:onTabDoublePress forKey:@"onTabDoublePress"];
+
+    EventBlock onTabBarMeasured = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onTabBarMeasured({.height = [[body objectForKey:@"height"] intValue]});
+      }
+    };
+    [_containerView setValue:onTabBarMeasured forKey:@"onTabBarMeasured"];
+
+    EventBlock onNativeLayout = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onNativeLayout({
+          .width = [[body objectForKey:@"width"] doubleValue],
+          .height = [[body objectForKey:@"height"] doubleValue]
+        });
+      }
+    };
+    [_containerView setValue:onNativeLayout forKey:@"onNativeLayout"];
+  }
+
+  return self;
+}
+
++ (BOOL)shouldBeRecycled
+{
+  return NO;
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  SEL sel = @selector(insertChild:atIndex:);
+  if ([_containerView respondsToSelector:sel]) {
+    NSMethodSignature *sig = [_containerView methodSignatureForSelector:sel];
+    NSInvocation *inv = [NSInvocation invocationWithMethodSignature:sig];
+    [inv setSelector:sel];
+    [inv setTarget:_containerView];
+    UIView *child = childComponentView;
+    [inv setArgument:&child atIndex:2];
+    [inv setArgument:&index atIndex:3];
+    [inv invoke];
+  }
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  SEL sel = @selector(removeChildAtIndex:);
+  if ([_containerView respondsToSelector:sel]) {
+    NSMethodSignature *sig = [_containerView methodSignatureForSelector:sel];
+    NSInvocation *inv = [NSInvocation invocationWithMethodSignature:sig];
+    [inv setSelector:sel];
+    [inv setTarget:_containerView];
+    [inv setArgument:&index atIndex:2];
+    [inv invoke];
+  }
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<RNBottomTabsViewProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<RNBottomTabsViewProps const>(props);
+
+#define SET_PROP(prop, value) \
+  if ([_containerView respondsToSelector:@selector(setProp:)]) { \
+    [_containerView setValue:value forKey:@#prop]; \
+  }
+
+  if (oldViewProps.items != newViewProps.items) {
+    [_containerView setValue:convertItemsToArray(newViewProps.items) forKey:@"items"];
+  }
+
+  if (oldViewProps.translucent != newViewProps.translucent) {
+    [_containerView setValue:@(newViewProps.translucent) forKey:@"translucent"];
+  }
+
+  if (oldViewProps.icons != newViewProps.icons) {
+    auto iconsArray = [[NSMutableArray alloc] init];
+    for (auto &source: newViewProps.icons) {
+      NSMutableDictionary *iconDict = [NSMutableDictionary dictionary];
+      iconDict[@"uri"] = [NSString stringWithUTF8String:source.uri.c_str()];
+      iconDict[@"width"] = @(source.size.width);
+      iconDict[@"height"] = @(source.size.height);
+      iconDict[@"scale"] = @(source.scale);
+      [iconsArray addObject:iconDict];
+    }
+    [_containerView setValue:iconsArray forKey:@"icons"];
+  }
+
+  if (oldViewProps.selectedIcons != newViewProps.selectedIcons) {
+    auto selectedIconsArray = [[NSMutableArray alloc] init];
+    for (auto &source: newViewProps.selectedIcons) {
+      NSMutableDictionary *iconDict = [NSMutableDictionary dictionary];
+      iconDict[@"uri"] = [NSString stringWithUTF8String:source.uri.c_str()];
+      iconDict[@"width"] = @(source.size.width);
+      iconDict[@"height"] = @(source.size.height);
+      iconDict[@"scale"] = @(source.scale);
+      [selectedIconsArray addObject:iconDict];
+    }
+    [_containerView setValue:selectedIconsArray forKey:@"selectedIcons"];
+  }
+
+  if (oldViewProps.sidebarAdaptable != newViewProps.sidebarAdaptable) {
+    [_containerView setValue:@(newViewProps.sidebarAdaptable) forKey:@"sidebarAdaptable"];
+  }
+
+  if (oldViewProps.minimizeBehavior != newViewProps.minimizeBehavior) {
+    [_containerView setValue:NSStringFromStdStringNilIfEmpty(newViewProps.minimizeBehavior) forKey:@"minimizeBehavior"];
+  }
+
+  if (oldViewProps.disablePageAnimations != newViewProps.disablePageAnimations) {
+    [_containerView setValue:@(newViewProps.disablePageAnimations) forKey:@"disablePageAnimations"];
+  }
+
+  if (oldViewProps.labeled != newViewProps.labeled) {
+    [_containerView setValue:@(newViewProps.labeled) forKey:@"labeled"];
+  }
+
+  if (oldViewProps.selectedPage != newViewProps.selectedPage) {
+    [_containerView setValue:[NSString stringWithUTF8String:newViewProps.selectedPage.c_str()] forKey:@"selectedPage"];
+  }
+
+  if (oldViewProps.scrollEdgeAppearance != newViewProps.scrollEdgeAppearance) {
+    [_containerView setValue:NSStringFromStdStringNilIfEmpty(newViewProps.scrollEdgeAppearance) forKey:@"scrollEdgeAppearance"];
+  }
+
+  if (oldViewProps.barTintColor != newViewProps.barTintColor) {
+    [_containerView setValue:RCTUIColorFromSharedColor(newViewProps.barTintColor) forKey:@"barTintColor"];
+  }
+
+  if (oldViewProps.activeTintColor != newViewProps.activeTintColor) {
+    [_containerView setValue:RCTUIColorFromSharedColor(newViewProps.activeTintColor) forKey:@"activeTintColor"];
+  }
+
+  if (oldViewProps.inactiveTintColor != newViewProps.inactiveTintColor) {
+    [_containerView setValue:RCTUIColorFromSharedColor(newViewProps.inactiveTintColor) forKey:@"inactiveTintColor"];
+  }
+
+  if (oldViewProps.hapticFeedbackEnabled != newViewProps.hapticFeedbackEnabled) {
+    [_containerView setValue:@(newViewProps.hapticFeedbackEnabled) forKey:@"hapticFeedbackEnabled"];
+  }
+
+  if (oldViewProps.fontSize != newViewProps.fontSize) {
+    [_containerView setValue:@(newViewProps.fontSize) forKey:@"fontSize"];
+  }
+
+  if (oldViewProps.fontWeight != newViewProps.fontWeight) {
+    [_containerView setValue:NSStringFromStdStringNilIfEmpty(newViewProps.fontWeight) forKey:@"fontWeight"];
+  }
+
+  if (oldViewProps.fontFamily != newViewProps.fontFamily) {
+    [_containerView setValue:NSStringFromStdStringNilIfEmpty(newViewProps.fontFamily) forKey:@"fontFamily"];
+  }
+
+  if (oldViewProps.tabBarHidden != newViewProps.tabBarHidden) {
+    [_containerView setValue:@(newViewProps.tabBarHidden) forKey:@"tabBarHidden"];
+  }
+
+#undef SET_PROP
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState
+{
+  auto _state = std::static_pointer_cast<RNBottomTabsViewShadowNode::ConcreteState const>(state);
+  auto data = _state->getData();
+  if (auto imgLoaderPtr = _state.get()->getData().getImageLoader().lock()) {
+    id imageLoader = unwrapManagedObject(imgLoaderPtr);
+    if ([_containerView respondsToSelector:@selector(setImageLoader:)]) {
+      [_containerView performSelector:@selector(setImageLoader:) withObject:imageLoader];
+    }
+  }
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNBottomTabsViewCls(void)
+{
+  return RCTBottomTabsComponentView.class;
+}