wip: add screen wrappers and update their shadow node state

okwasniewski · okwasniewski · commit 4a56cf5d271d · 2025-03-20T17:09:17.000+01:00
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewComponentDescriptor.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewComponentDescriptor.h
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h
@@ -0,0 +1,33 @@
+#ifdef __cplusplus
+
+#pragma once
+
+#include <react/renderer/components/RNCTabView/RNCTabViewScreenShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+class RNCTabViewScreenComponentDescriptor final : public ConcreteComponentDescriptor<RNCTabViewScreenShadowNode>
+{
+public:
+  RNCTabViewScreenComponentDescriptor(const ComponentDescriptorParameters &parameters)
+  : ConcreteComponentDescriptor(parameters) {}
+
+  
+  /**
+   Retrieve shadow node's state and update it's layout size accordingly.
+   This is needed because we need to accomodate for bottom bar / sidebar size.
+   */
+  void adopt(ShadowNode &shadowNode) const override {
+    auto& layoutableShadowNode = static_cast<RNCTabViewScreenShadowNode&>(shadowNode);
+    auto& stateData = layoutableShadowNode.getStateData();
+    
+    layoutableShadowNode.setSize(stateData.frameSize);
+    
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+}
+
+#endif
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenShadowNode.cpp b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenShadowNode.cpp
@@ -0,0 +1,7 @@
+#include "RNCTabViewScreenShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNCTabViewScreenComponentName[] = "RNCTabViewScreen";
+
+}
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenShadowNode.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenShadowNode.h
@@ -3,7 +3,7 @@
 #pragma once
 
 #include <jsi/jsi.h>
-#include <react/renderer/components/RNCTabView/RNCTabViewState.h>
+#include <react/renderer/components/RNCTabView/RNCTabViewScreenState.h>
 #include <react/renderer/components/RNCTabView/Props.h>
 #include <react/renderer/components/RNCTabView/EventEmitters.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
@@ -12,26 +12,20 @@
 
 namespace facebook::react {
 
-JSI_EXPORT extern const char RNCTabViewComponentName[];
+JSI_EXPORT extern const char RNCTabViewScreenComponentName[];
 
 /*
-* `ShadowNode` for <RNCTabView> component.
+* `ShadowNode` for <RNCTabViewScreen> component.
 */
-class JSI_EXPORT RNCTabViewShadowNode final
+class JSI_EXPORT RNCTabViewScreenShadowNode final
 : public ConcreteViewShadowNode<
-RNCTabViewComponentName,
-RNCTabViewProps,
-RNCTabViewEventEmitter,
-RNCTabViewState>
+RNCTabViewScreenComponentName,
+RNCTabViewScreenProps,
+RNCTabViewScreenEventEmitter,
+RNCTabViewScreenState>
 {
 public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
-  
-  void updateStateIfNeeded();
-  
-#pragma mark - ShadowNode overrides
-  
-  void layout(LayoutContext layoutContext) override;
 };
 }
 
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenState.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenState.h
@@ -10,12 +10,12 @@
 
 namespace facebook::react {
 
-class RNCTabViewState
+class RNCTabViewScreenState
 {
 public:
-  RNCTabViewState() = default;
-  RNCTabViewState(Size frameSize): frameSize(frameSize) {};
-  
+  RNCTabViewScreenState() = default;
+  RNCTabViewScreenState(Size frameSize): frameSize(frameSize) {};
+
   Size frameSize;
 };
 
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewShadowNode.cpp b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewShadowNode.cpp
diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm
@@ -1,8 +1,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import "RCTTabViewComponentView.h"
+#import "RCTTabViewScreenComponentView.h"
 
 #import <react/renderer/components/RNCTabView/ComponentDescriptors.h>
-#import <react/renderer/components/RNCTabView/RNCTabViewComponentDescriptor.h>
 #import <react/renderer/components/RNCTabView/EventEmitters.h>
 #import <react/renderer/components/RNCTabView/Props.h>
 #import <react/renderer/components/RNCTabView/RCTComponentViewHelpers.h>
@@ -38,7 +38,6 @@ @interface RCTTabViewComponentView () <RCTRNCTabViewViewProtocol, TabViewProvide
 @implementation RCTTabViewComponentView {
   TabViewProvider *_tabViewProvider;
   NSMutableArray<PlatformView *> *_reactSubviews;
-  RNCTabViewShadowNode::ConcreteState::Shared _state;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -86,10 +85,6 @@ - (void)unmountChildComponentView:(PlatformView<RCTComponentViewProtocol> *)chil
   [childComponentView removeFromSuperview];
 }
 
-- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState {
-  _state = std::static_pointer_cast<const RNCTabViewShadowNode::ConcreteState>(state);
-}
-
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
   const auto &oldViewProps = *std::static_pointer_cast<RNCTabViewProps const>(_props);
@@ -250,8 +245,25 @@ - (void)onTabBarMeasuredWithHeight:(NSInteger)height reactTag:(NSNumber *)reactT
   }
 }
 
+- (size_t)getSelectedIndex
+{
+  const auto &props = *std::static_pointer_cast<RNCTabViewProps const>(_props);
+  
+  auto selectedItem = std::find_if(props.items.begin(), props.items.end(),
+                                   [&](const RNCTabViewItemsStruct &item) {
+    return item.key == props.selectedPage;
+  });
+  
+  return std::distance(props.items.begin(), selectedItem);
+}
+
 - (void)onLayoutWithSize:(CGSize)size reactTag:(NSNumber *)reactTag {
-  _state->updateState(RNCTabViewState({size.width, size.height}));
+  size_t selectedIndex = [self getSelectedIndex];
+  
+  RCTTabViewScreenComponentView *child = (RCTTabViewScreenComponentView *)_reactSubviews[selectedIndex];
+  if ([child respondsToSelector:@selector(updateFrameSize:)]) {
+    [child updateFrameSize:size];
+  }
 }
 
 @end
diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewScreenComponentView.h b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewScreenComponentView.h
@@ -0,0 +1,19 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#if TARGET_OS_OSX
+#import <AppKit/AppKit.h>
+#else
+#import <UIKit/UIKit.h>
+#endif
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTabViewScreenComponentView: RCTViewComponentView
+
+- (void)updateFrameSize:(CGSize)size;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */
diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewScreenComponentView.mm b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewScreenComponentView.mm
@@ -0,0 +1,63 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "RCTTabViewScreenComponentView.h"
+
+#import <react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h>
+#import <react/renderer/components/RNCTabView/EventEmitters.h>
+#import <react/renderer/components/RNCTabView/Props.h>
+#import <react/renderer/components/RNCTabView/RCTComponentViewHelpers.h>
+
+#import <React/RCTFabricComponentsPlugins.h>
+
+#if TARGET_OS_OSX
+typedef NSView PlatformView;
+#else
+typedef UIView PlatformView;
+#endif
+
+
+using namespace facebook::react;
+
+@interface RCTTabViewScreenComponentView () <RCTRNCTabViewScreenViewProtocol> {
+}
+
+@end
+
+@implementation RCTTabViewScreenComponentView {
+  RNCTabViewScreenShadowNode::ConcreteState::Shared _state;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<RNCTabViewScreenComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNCTabViewScreenProps>();
+    _props = defaultProps;
+  }
+
+  return self;
+}
+
+- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState {
+  _state = std::static_pointer_cast<const RNCTabViewScreenShadowNode::ConcreteState>(state);
+}
+
+- (void)updateFrameSize:(CGSize)size
+{
+  _state->updateState(RNCTabViewScreenState({size.width, size.height}));
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNCTabViewScreenCls(void)
+{
+  return RCTTabViewScreenComponentView.class;
+}
+
+#endif // RCT_NEW_ARCH_ENABLED
+
+
+
diff --git a/packages/react-native-bottom-tabs/package.json b/packages/react-native-bottom-tabs/package.json
@@ -127,7 +127,8 @@
     },
     "ios": {
       "componentProvider": {
-        "RNCTabView": "RCTTabViewComponentView"
+        "RNCTabView": "RCTTabViewComponentView",
+        "RNCTabViewScreen": "RCTTabViewScreenComponentView"
       }
     }
   }
diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx
@@ -16,6 +16,7 @@ import NativeTabView from './TabViewNativeComponent';
 import useLatestCallback from 'use-latest-callback';
 import type { BaseRoute, NavigationState } from './types';
 import DelayedFreeze from './DelayedFreeze';
+import TabViewScreenNativeComponent from './TabViewScreenNativeComponent';
 
 const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
   icon?.sfSymbol;
@@ -324,7 +325,7 @@ const TabView = <Route extends BaseRoute>({
           const freeze = !focused ? getFreezeOnBlur({ route }) : false;
 
           return (
-            <View
+            <TabViewScreenNativeComponent
               key={route.key}
               collapsable={false}
               style={[styles.screen, styles.fullWidth]}
@@ -340,7 +341,7 @@ const TabView = <Route extends BaseRoute>({
                   jumpTo,
                 })}
               </DelayedFreeze>
-            </View>
+            </TabViewScreenNativeComponent>
           );
         })}
       </NativeTabView>
diff --git a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts
@@ -58,6 +58,4 @@ export interface TabViewProps extends ViewProps {
   fontSize?: Int32;
 }
 
-export default codegenNativeComponent<TabViewProps>('RNCTabView', {
-  interfaceOnly: true,
-});
+export default codegenNativeComponent<TabViewProps>('RNCTabView');
diff --git a/packages/react-native-bottom-tabs/src/TabViewScreenNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewScreenNativeComponent.ts
@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface TabViewScreenProps extends ViewProps {}
+
+export default codegenNativeComponent<TabViewScreenProps>('RNCTabViewScreen', {
+  interfaceOnly: true,
+});

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,8 @@`
`127`	`127`	`},`
`128`	`128`	`"ios": {`
`129`	`129`	`"componentProvider": {`
`130`		`- "RNCTabView": "RCTTabViewComponentView"`
	`130`	`+ "RNCTabView": "RCTTabViewComponentView",`
	`131`	`+ "RNCTabViewScreen": "RCTTabViewScreenComponentView"`
`131`	`132`	`}`
`132`	`133`	`}`
`133`	`134`	`}`