Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

iOS 27 SDK: tab titles and icons land on the wrong tabs when one tab has role "search"

Offen
  • Stimmt etwas nicht?
#596 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
72/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
ios, react-native, swift, typescript
Bereich
mobile

Rechercherichtung

Start in ios/TabViewImpl.swift, at configureTabBarItemImages, and compare the tab bar item's display order with the declared tab order under the iOS 27 SDK. The issue suggests matching items by identity and falling back to position when tabs are unavailable. Reproduce with four tabs, with Search second and role search; done when labels, icons, and selected screens correspond on iOS 27 while the existing fallback remains.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug
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

When the app is built with Xcode 27 (iOS 27 SDK), every tab after a tab with role: "search" shows the title and icon of its neighbour. Selection still works by index, so the bar looks plausible, but pressing a tab opens a different screen than its label says. The same source built with Xcode 26 is fine.

In my case with four tabs declared as Home, Search (role: "search"), Favorites, Library, the bar shows Home, Favorites, Library, Search. Pressing "Library" opens Search and pressing "Search" opens Favorites.

Cause

Linked against the iOS 27 SDK, UITabBar.items is returned in display order, and a tab with the search role is displayed last. UITabBarController.tabs keeps the declaration order.

configureTabBarItemImages in ios/TabViewImpl.swift assigns title and image by the item's position:

for (tabBarIndex, item) in items.enumerated() {
  guard let tabData = props.filteredItems[safe: tabBarIndex] else { continue }

So the item at display position 1 (Favorites) receives the data of declared tab 1 (Search), and so on. This is still the case on main (b044dbd5).

Suggested fix

Match the item to its tab by identity instead of by position, and fall back to the position where tabs is not available:

private func declarationIndex(of item: UITabBarItem, at tabBarIndex: Int, in tabBar: UITabBar) -> Int {
  if #available(iOS 18.0, tvOS 18.0, visionOS 2.0, *),
    let tabController = tabBar.delegate as? UITabBarController,
    let index = tabController.tabs.firstIndex(where: { $0.viewController?.tabBarItem === item })
  {
    return index
  }
  return tabBarIndex
}

We run this as a patch on 1.4.0 and it restores the right labels: https://github.com/streamyfin/streamyfin/pull/2196. Happy to open a PR here.

Related: #590 and #588 touch the same function.

Library version

1.4.0

Environment info
System:
  OS: macOS 26.6.2
  CPU: (11) arm64 Apple M3 Pro
SDKs:
  iOS SDK:
    Platforms:
      - iOS 27.0
      - tvOS 27.0
IDEs:
  Xcode:
    version: 27.0/27A266a
Languages:
  Swift: 6.4
npmPackages:
  react:
    installed: 19.2.3
  react-native-tvos:
    installed: 0.86.0-2
  react-native-bottom-tabs: 1.4.0
  "@bottom-tabs/react-navigation": 1.4.0
  "@react-navigation/native": 7.3.17
  expo: 57.0.25
iOS:
  hermesEnabled: true
  newArchEnabled: true
Steps to reproduce

iOS only. Seen on a physical iPhone 17 Pro and on the iOS 27.0 simulator (iPhone 18 Pro).

  1. Declare four tabs, the second one with role: "search" (sample below).
  2. Build and run with Xcode 27.0 (iOS 27 SDK).
  3. Look at the tab bar: it reads Home, Favorites, Library, Search.
  4. Press "Library": the Search screen opens. Press "Search": the Favorites screen opens.
  5. Build the same source with Xcode 26: labels and screens match.
Reproducible sample code
// Mirrors the tab setup in our app (https://github.com/streamyfin/streamyfin).
// Not run standalone: the bug was observed in the app itself.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

const Tab = createNativeBottomTabNavigator();

const screen = (label) => () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>{label}</Text>
  </View>
);

const Home = screen('Home screen');
const Search = screen('Search screen');
const Favorites = screen('Favorites screen');
const Library = screen('Library screen');

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={Home}
          options={{ tabBarIcon: () => ({ sfSymbol: 'house.fill' }) }}
        />
        <Tab.Screen
          name="Search"
          component={Search}
          options={{
            role: 'search',
            tabBarIcon: () => ({ sfSymbol: 'magnifyingglass' }),
          }}
        />
        <Tab.Screen
          name="Favorites"
          component={Favorites}
          options={{ tabBarIcon: () => ({ sfSymbol: 'heart.fill' }) }}
        />
        <Tab.Screen
          name="Library"
          component={Library}
          options={{ tabBarIcon: () => ({ sfSymbol: 'rectangle.stack.fill' }) }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
Vorherrschende Sprache
TypeScript
Sterne
1.5k
Forks
110
Ø Merge
2 T. 18 Std.
Gemergte PRs (30 T.)
2

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-bottom-tabs

Alle Issues in callstack/react-native-bottom-tabs

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.