Not works on iOS27 Developer Beta Version

[pingkai]

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

After updating to iOS 27, only the first screen and the search role screen work, and the other screens are frozen. And I tested the sample code in the document, the SettingsScreen doesn't show anything.

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();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'book' }),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'gear' }),
            preventsDefault: true, // Prevents automatic tab switching
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Library version

1.1.0

Environment info

System:
  OS: macOS 26.5.1
  CPU: (8) arm64 Apple M2
  Memory: 178.58 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.20.0
    path: ~/.nvm/versions/node/v20.20.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.20.0/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.20.0/bin/npm
  Watchman:
    version: 2025.09.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.5
      - iOS 26.5
      - macOS 26.5
      - tvOS 26.5
      - visionOS 26.5
      - watchOS 26.5
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.5/17F42
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.17
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  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. Using the code in the document above
2. Tap to switch to the Settings tab, it displays nothing.

Reproducible sample code

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();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'book' }),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'gear' }),
            preventsDefault: true, // Prevents automatic tab switching
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

[pingkai]

Adding

lazy: false,

can make the "Settings!" string display. But after adding a TouchableOpacity to the Text, only the one on the Home screen is touchable.

import { Text, TouchableOpacity, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
import { useEffect } from 'react';

const Tab = createNativeBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => console.log('Home')}>  // add TouchableOpacity
        <Text style={{ color: 'red' }}>Home!</Text>
      </TouchableOpacity>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => console.log('Settings')}>   // add TouchableOpacity
        <Text style={{ color: 'red' }}>Settings!</Text>
      </TouchableOpacity>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'book' }),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'gear' }),
            preventsDefault: true, // Prevents automatic tab switching
            lazy: false,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

[thiagobrez]

Thanks for the report. Looking into this 👀

[thiagobrez]

@pingkai I have a working solution here: #530

Will be merging later today, and a pushing release today or tomorrow!

[andr3wV]

+1 on release for today :)

[thiagobrez]

Released in 1.3.0 🎉