Merge pull request #790 from grahammendick/pager-fabric

NavigationReactNative/src/TabBar.tsx

@@ -111,7 +111,7 @@ class TabBar extends React.Component<any, any> {
                             .map((child: any, index) => {
                                 var selected = index === this.state.selectedTab;
                                 var freezable = Math.abs(index - this.state.selectedTab) > (Platform.OS === 'android' && !primary ? 1 : 0);
-                                return React.cloneElement(child, {...child.props, index, selected, freezable})
+                                return React.cloneElement(child, {...child.props, index, selected, primary, freezable})
                             })}
                 </TabBar>}
                 {bottomTabs && tabLayout}

NavigationReactNative/src/TabBarItem.tsx

@@ -6,7 +6,7 @@ import BackHandlerContext from './BackHandlerContext';
 import createBackHandler from './createBackHandler';
 import Freeze from './Freeze';
 
-const TabBarItem = ({selected, onPress, children, title, image, systemItem, badge, index, freezable, ...props}) => {
+const TabBarItem = ({selected, onPress, children, title, image, systemItem, badge, index, primary, freezable, ...props}) => {
     const [loaded, setLoaded] = useState(selected);
     const [freeze, setFreeze] = useState(false);
     const backHandler = useRef(createBackHandler());
@@ -28,11 +28,12 @@ const TabBarItem = ({selected, onPress, children, title, image, systemItem, badg
     }, [image, systemItem, badge, title]);
     if (!loaded && selected) setLoaded(true);
     image = typeof image === 'string' ? (Platform.OS === 'ios' ? null : {uri: image}) : image;
+    const TabBarItem = Platform.OS === 'ios' || primary ? NVTabBarItem : NVTabBarPagerItem;
     return (
         <>
             <BackButton onPress={() => selected && backHandler.current.handleBack()} />
             <Freeze enabled={loaded && !selected && freeze}>
-                <NVTabBarItem
+                <TabBarItem
                     ref={(ref: any) => {
                         const viewConfig = ref?.viewConfig || ref?._viewConfig;
                         if (!!React.Suspense && viewConfig?.validAttributes?.style) {
@@ -59,13 +60,14 @@ const TabBarItem = ({selected, onPress, children, title, image, systemItem, badg
                             {children}
                         </BackHandlerContext.Provider>
                     </TabBarItemContext.Provider>
-                </NVTabBarItem>
+                </TabBarItem>
             </Freeze>
         </>
     );
 }
 
 var NVTabBarItem = global.nativeFabricUIManager ? require('./TabBarItemNativeComponent').default : requireNativeComponent('NVTabBarItem');
+var NVTabBarPagerItem = global.nativeFabricUIManager ? require('./TabBarPagerItemNativeComponent').default : requireNativeComponent('NVTabBarPagerItem');
 
 const styles = StyleSheet.create({
     tabBarItem: {

NavigationReactNative/src/TabBarPagerItemNativeComponent.js

@@ -0,0 +1,24 @@
+// @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';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  title: string,
+  fontFamily: string,
+  fontWeight: string,
+  fontStyle: string,
+  fontSize?: WithDefault<Float, -1>,
+  testID: string,
+  badge: string,
+  badgeColor: ColorValue,
+  image: ImageSource,
+  systemItem: string,
+  onPress: BubblingEventHandler<null>
+|}>;
+
+export default (codegenNativeComponent<NativeProps>(
+   'NVTabBarPagerItem',
+): HostComponent<NativeProps>);

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/NavigationPackage.java

@@ -21,6 +21,7 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
             new TabBarPagerManager(),
             new TabBarPagerRTLManager(),
             new TabBarItemManager(),
+            new TabBarPagerItemManager(),
             new TabLayoutManager(),
             new TabLayoutRTLManager(),
             new TabNavigationManager(),

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/TabBarPagerItemManager.java

@@ -0,0 +1,16 @@
+package com.navigation.reactnative;
+
+import androidx.annotation.NonNull;
+
+public class TabBarPagerItemManager extends TabBarItemManager {
+    @NonNull
+    @Override
+    public String getName() {
+        return "NVTabBarPagerItem";
+    }
+
+    @Override
+    public boolean needsCustomLayoutForChildren() {
+        return true;
+    }
+}

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/TabBarPagerItemViewManager.java

@@ -0,0 +1,18 @@
+package com.navigation.reactnative;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.viewmanagers.NVTabBarPagerItemManagerInterface;
+
+public class TabBarPagerItemViewManager extends TabBarItemViewManager implements NVTabBarPagerItemManagerInterface<TabBarItemView> {
+    @NonNull
+    @Override
+    public String getName() {
+        return "NVTabBarPagerItem";
+    }
+
+    @Override
+    public boolean needsCustomLayoutForChildren() {
+        return true;
+    }
+}

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/TabBarPagerRTLManager.java

@@ -51,6 +51,7 @@ protected ViewPager2 createViewInstance(@Nonnull final ThemedReactContext reactC
             transaction.commitNowAllowingStateLoss();
         }
         final TabBarPagerRTLAdapter tabBarPagerAdapter = new TabBarPagerRTLAdapter(fragment);
+        tabBarPager.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
         tabBarPager.setAdapter(tabBarPagerAdapter);
         tabBarPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
             @Override

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/TabBarPagerRTLViewManager.java

@@ -69,6 +69,7 @@ protected ViewPager2 createViewInstance(@Nonnull final ThemedReactContext reactC
             transaction.commitNowAllowingStateLoss();
         }
         final TabBarPagerRTLAdapter tabBarPagerAdapter = new TabBarPagerRTLAdapter(fragment);
+        tabBarPager.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
         tabBarPager.setAdapter(tabBarPagerAdapter);
         tabBarPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
             @Override

NavigationReactNative/src/android/src/main/java/com/navigation/reactnative/newarch/NavigationPackage.java

@@ -42,6 +42,7 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
             new StatusBarViewManager(),
             new TabBarViewManager(),
             new TabBarItemViewManager(),
+            new TabBarPagerItemViewManager(),
             new TabBarPagerViewManager(),
             new TabBarPagerRTLViewManager(),
             new TabLayoutViewManager(),

NavigationReactNative/src/ios/NVTabBarPagerItemComponentView.h

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

NavigationReactNative/src/ios/NVTabBarPagerItemComponentView.mm

@@ -0,0 +1,39 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "NVTabBarPagerItemComponentView.h"
+
+#import <react/renderer/components/navigationreactnative/ComponentDescriptors.h>
+#import <react/renderer/components/navigationreactnative/EventEmitters.h>
+#import <react/renderer/components/navigationreactnative/Props.h>
+#import <react/renderer/components/navigationreactnative/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@interface NVTabBarPagerItemComponentView () <RCTNVTabBarPagerItemViewProtocol>
+@end
+
+@implementation NVTabBarPagerItemComponentView
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+    if (self = [super initWithFrame:frame]) {
+    }
+    return self;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<NVTabBarPagerItemComponentDescriptor>();
+}
+
+@end
+
+Class<RCTComponentViewProtocol> NVTabBarPagerItemCls(void)
+{
+  return NVTabBarPagerItemComponentView.class;
+}
+
+#endif

NavigationReactNative/src/ios/NavigationReactNative.xcodeproj/project.pbxproj

@@ -23,6 +23,8 @@
 		34BC12EF2BB77F9C007E3EA1 /* NVSystemImageValidator.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = NVSystemImageValidator.mm; sourceTree = "<group>"; };
 		70153011229D1F4800903FA7 /* NVSearchResultsController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = NVSearchResultsController.m; sourceTree = "<group>"; };
 		70153013229D1F5500903FA7 /* NVSearchResultsController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = NVSearchResultsController.h; sourceTree = "<group>"; };
+		701EDB662C3802EF00E79704 /* NVTabBarPagerItemComponentView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = NVTabBarPagerItemComponentView.h; sourceTree = "<group>"; };
+		701EDB672C3802FB00E79704 /* NVTabBarPagerItemComponentView.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = NVTabBarPagerItemComponentView.mm; sourceTree = "<group>"; };
 		7020F6BE20ECD07A00E7A74E /* libNavigationReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libNavigationReactNative.a; sourceTree = BUILT_PRODUCTS_DIR; };
 		7021392A282C50BF001E4ECC /* NVSearchBarComponentView.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = NVSearchBarComponentView.mm; sourceTree = "<group>"; };
 		7021392C282C50CC001E4ECC /* NVSearchBarComponentView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = NVSearchBarComponentView.h; sourceTree = "<group>"; };
@@ -154,6 +156,8 @@
 		7020F6B520ECD07A00E7A74E = {
 			isa = PBXGroup;
 			children = (
+				701EDB672C3802FB00E79704 /* NVTabBarPagerItemComponentView.mm */,
+				701EDB662C3802EF00E79704 /* NVTabBarPagerItemComponentView.h */,
 				703335302C2DFCC900160A73 /* NVSheetComponentView.h */,
 				7033352F2C2DFCBD00160A73 /* NVSheetComponentView.mm */,
 				7033352E2C2DFCA400160A73 /* NVDialogComponentView.h */,