Extra height on tab view with fabric enabled

[luutruong]

Current behavior

Expected behavior

Should not have extra height.

Without fabric; it works fine.

Reproduction

Usage:

  const renderScene = useCallback(
    (info: {route: {key: string}}) => {
      return (
        <Foo />
      );
    },
    [routes, tabIndex],
  );

  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(() => {
    return {
      backgroundColor: colors.contentBackgroundColor,
      paddingVertical: 0,
    };
  }, [colors.contentBackgroundColor]);
  const textStyle: any = useMemo(() => {
    return {
      fontWeight: '600',
    };
  }, []);
  const renderTabLabel = useCallback(
    (info: {route: {title: string}}) => {
      return <Text style={textStyle}>{info.route.title}</Text>;
    },
    [textStyle],
  );
  const renderTabBar = useCallback(
    (tabBarProps: any) => (
      <TabBar
        {...tabBarProps}
        style={tabBarStyle}
        renderLabel={renderTabLabel}
        indicatorStyle={{backgroundColor: colors.textColor}}
        scrollEnabled
        tabStyle={{width: 'auto'}}
      />
    ),
    [renderTabLabel, tabBarStyle, colors.textColor],
  );

  return (
    <TabView
      lazy
      onIndexChange={setTabIndex}
      navigationState={{index: tabIndex, routes}}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      initialLayout={{width: dimensions.width}}
    />
  );

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	^3.3.0
react-native-pager-view	^6.1.0-rc.1
react-native	0.70.3
expo
node	16
npm or yarn	yarn

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 6.1.0-rc.1, latest: 6.0.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[okwasniewski]

Hey @luutruong

Thanks for reporting this bug, can you provide a screenshot comparing both architectures?

[luutruong]

Hi @okwasniewski

I attached screenshot in description of issue.

• Old version: (react-native: 0.70.3 react-native-tab-view: ^3.3.0 react-native-pager-view: ^6.0.1)

  

• Fabric enabled: https://user-images.githubusercontent.com/3833024/196013944-8f194ce3-202e-4f24-b568-88dca758ff6c.png

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is in react-native-pager-view library which is a dependency of react-native-tab-view. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[okwasniewski]

Linking the same issue from react-native-pager-view: https://github.com/callstack/react-native-pager-view/issues/618

[troZee]

Could you check this version of RNPV https://github.com/callstack/react-native-pager-view/releases/tag/v6.1.0-rc.2

[okwasniewski]

Closing this, since it was resolved in react-native-pager-view