Skip to content

Weird, non-removable element on top of tabs on iOS 26.1 #477

@yunyu

Description

@yunyu

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

Why I try doing a basic non-navigator example, I see an extremely weird empty blob that I can't seem to disable show up on top of the tab bar.

Image

Code:

  const [index, setIndex] = useState(0);
  const [routes] = useState<TabViewRoute[]>([
    {
      key: 'home',
      title: 'Home',
      focusedIcon: { sfSymbol: 'house' },
    },
    {
      key: 'settings',
      title: 'Settings',
      focusedIcon: { sfSymbol: 'gear' },
    },
  ]);

  const renderScene = useCallback<TabViewProps['renderScene']>(({ route, jumpTo }) => {
    return <IndexSceneIOS />;
  }, []);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      labeled
      minimizeBehavior='never'
    />
  );
}

What is it, and how can I turn it off?

Library version

1.0.3

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.1
  CPU: (10) arm64 Apple M4
  Memory: 170.41 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.9.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/yunyu/.yarn/bin/yarn
  npm:
    version: 11.6.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.11.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK:
    API Levels:
      - "35"
      - "36"
    Build Tools:
      - 35.0.0
      - 36.0.0
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.1.1/17B100
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.17
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

  1. Follow the basic standalone usage instructions: https://incubator.callstack.com/react-native-bottom-tabs/docs/guides/standalone-usage
  2. Observe the rendered tab bar

Reproducible sample code

IndexRouteIOS() {
  const [index, setIndex] = useState(0);
  const [routes] = useState<TabViewRoute[]>([
    {
      key: 'home',
      title: 'Home',
      focusedIcon: { sfSymbol: 'house' },
    },
    {
      key: 'settings',
      title: 'Settings',
      focusedIcon: { sfSymbol: 'gear' },
    },
  ]);

  const renderScene = useCallback<TabViewProps['renderScene']>(({ route, jumpTo }) => {
    return <IndexSceneIOS />;
  }, []);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      labeled
      minimizeBehavior='never'
    />
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions