[Android][NativeTabs] Pressables in bottom ~56dp of Stack-pushed screens don't fire when hidden=true (also affects scrolled rows)

[antekordic]

Description

When a Stack-pushed screen is a child of <NativeTabs hidden={true}> (i.e. <Tabs.Host tabBarHidden={true}> on Android), any Pressable / TouchableOpacity rendered in the bottom ~56dp strip of the visible screen does not fire onPress on Android. The dead-zone width matches the BottomNavigationView's default height.

This affects both:

• Static layout — a Pressable anchored to the bottom of the screen never fires.
• Scrollable content — a Pressable inside a ScrollView / FlatList fires when scrolled above the strip, but stops firing the moment it scrolls into the bottom ~56dp. Scroll the same row a few pixels up and it works again. This proves the dead zone is anchored to the screen bottom in window coordinates (it tracks the BottomNavigationView's measured strip), not to a specific layout slot.

The same components render correctly when mounted at a root-level route outside the (tabs) group, in the same app build, on the same device. iOS and the Android emulator do not reproduce.

JS → native chain traced

This chain should make BottomNavigationView untouchable when tabBarHidden=true:

• expo-router/unstable-native-tabs/NativeTabsView.android.js:25 forwards tabBarHidden={props.hidden} to Tabs.Host.
• TabsHost.kt:50 proxies to container.tabBarHidden.
• TabsContainer.kt:147-155 setter posts flushPendingUpdates().
• performContainerUpdate → updateBottomNavigationViewAppearanceIfNeeded → appearanceCoordinator.updateTabAppearance.
• TabsAppearanceApplicator.kt:38: bottomNavigationView.isVisible = !isTabBarHidden.

isVisible = false translates to visibility = View.GONE via the androidx KTX extension, which by Android semantics means no layout, no draw, no hit-test. Empirically the touch IS consumed inside the TabsContainer subtree, so one of:

• the visibility update never runs / isn't running in time
• a later layout pass restores View.VISIBLE
• the eater is a different view inside the TabsContainer subtree (TabsScreen ViewGroup, an inset listener, etc.)

A adb shell uiautomator dump on the foregrounded failing screen would confirm the actual native view state.

Steps to reproduce

1. Build the minimal repro to a physical Android device. (See file mapping in 00-README.md.)
2. From Home tab, tap Open /detail — Stack pushes a screen inside (tabs) with tabBarHidden=true.
3. Tap the static red BOTTOM button — does not fire.
4. In the scrollable list, scroll any row INTO the bottom ~56dp strip and tap it — does not fire as long as the row sits visually in the strip. Scroll it up by a few pixels — tap fires normally.
5. From Home tab, tap Open /control — Stack pushes the SAME screen content at root, outside (tabs).
6. Repeat the same taps on /control — all fire, including the static BOTTOM button and any scrolled-in row.

Snack or a link to a repository

https://gist.github.com/antekordic/4a4b03883842d9e4a769d4f139ada8a1

Screens version

4.25.2

React Native version

0.85.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow (expo SDK 56, expo-router 56.2.7, expo-router/unstable-native-tabs)

Architecture

Fabric (New Architecture)

Build type

Debug mode (also confirmed in release dev-client builds)

Device

Real device

Device model

Samsung Galaxy A17 (SM-A176B), Android 16, 3-button nav. Does NOT reproduce on Android emulator or iOS.

Acknowledgements

Yes — searched #2150, #2219, #1663, and expo/expo #41781; none describe this specific symptom (bottom-strip touch consumption on Stack-pushed screens under NativeTabs hidden=true, including scrolled content).

[t0maboro]

Hi @antekordic , thank you for reporting this.

From the initial investigation, I can tell that BottomNavigationView remains attached to the view hierarchy even when its visibility is set to hidden. It may still be intercepting touch events, which could be the RC of the observed behavior. Adding this to our backlog for further investigation.

Snippet for react-native-screens/FabricExample

import React, { useLayoutEffect } from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  ScrollView,
  Alert,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const RootStack = createNativeStackNavigator();
const HomeStack = createNativeStackNavigator();
const Tab = createNativeBottomTabNavigator();

function DeadZoneRepro({ label, badgeColor, navigation }: any) {
  return (
    <View style={styles.reproContainer}>
      <Text style={[styles.badge, { backgroundColor: badgeColor }]}>
        {label}
      </Text>

      <Pressable
        onPress={() => Alert.alert('TOP tapped')}
        style={[styles.btn, styles.topBtn]}
      >
        <Text style={styles.btnText}>TOP Pressable</Text>
      </Pressable>

      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.scrollContent}
      >
        {Array.from({ length: 20 }).map((_, i) => (
          <Pressable
            key={i}
            onPress={() => Alert.alert(`Row ${i} tapped`)}
            style={styles.rowBtn}
          >
            <Text style={styles.btnText}>Scrollable Row {i}</Text>
          </Pressable>
        ))}
      </ScrollView>

      <Pressable
        onPress={() => Alert.alert('BOTTOM tapped')}
        style={[styles.btn, styles.bottomBtn]}
      >
        <Text style={styles.btnText}>BOTTOM Pressable (Dead Zone Test)</Text>
      </Pressable>

      <Pressable onPress={() => navigation.goBack()} style={styles.backBtn}>
        <Text style={{ fontWeight: 'bold' }}>← Go Back</Text>
      </Pressable>
    </View>
  );
}

function ControlScreen({ navigation }: any) {
  return (
    <DeadZoneRepro
      label="CONTROL (root route, outside tabs)"
      badgeColor="green"
      navigation={navigation}
    />
  );
}

function DetailScreen({ navigation }: any) {
  useLayoutEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarHidden: true,
      tabBarStyle: { display: 'none' },
    });
    return () => {
      navigation.getParent()?.setOptions({
        tabBarHidden: false,
        tabBarStyle: { display: 'flex' },
      });
    };
  }, [navigation]);

  return (
    <DeadZoneRepro
      label="DETAIL (inside tabs, tab bar hidden=true)"
      badgeColor="orange"
      navigation={navigation}
    />
  );
}

function HomeIndexScreen({ navigation }: any) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Home tab (NativeTabs visible)</Text>

      <Pressable
        style={styles.link}
        onPress={() => navigation.navigate('Detail')}
      >
        <Text style={styles.linkText}>Open /detail (pushes inside tabs)</Text>
        <Text style={styles.linkSubText}>Bug reproduces here</Text>
      </Pressable>

      <Pressable
        style={styles.link}
        onPress={() => navigation.getParent()?.navigate('Control')}
      >
        <Text style={styles.linkText}>Open /control (pushes outside tabs)</Text>
        <Text style={styles.linkSubText}>Works perfectly here</Text>
      </Pressable>
    </View>
  );
}

function OtherTabScreen() {
  return (
    <View style={styles.container}>
      <Text>Other tab — not used by the repro.</Text>
    </View>
  );
}

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
      <HomeStack.Screen name="HomeIndex" component={HomeIndexScreen} />
      <HomeStack.Screen name="Detail" component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

function TabsNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeTab"
        component={HomeStackNavigator}
        options={{ title: 'Home' }}
      />
      <Tab.Screen
        name="OtherTab"
        component={OtherTabScreen}
        options={{ title: 'Other' }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{ headerShown: false }}>
        <RootStack.Screen name="Tabs" component={TabsNavigator} />
        <RootStack.Screen name="Control" component={ControlScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 20 },
  link: {
    padding: 16,
    backgroundColor: '#007AFF',
    borderRadius: 8,
    marginVertical: 8,
  },
  linkText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
  linkSubText: { color: 'rgba(255,255,255,0.7)', fontSize: 12, marginTop: 4 },

  reproContainer: { flex: 1, paddingTop: 80, backgroundColor: '#fff' },
  badge: {
    padding: 8,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 16,
    marginHorizontal: 16,
    borderRadius: 4,
    overflow: 'hidden',
  },

  btn: {
    padding: 16,
    borderRadius: 8,
    marginHorizontal: 16,
    alignItems: 'center',
  },
  btnText: { color: 'white', fontWeight: 'bold' },
  topBtn: { backgroundColor: '#333', marginBottom: 16 },

  bottomBtn: {
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 0,
    left: 16,
    right: 16,
    height: 56,
    justifyContent: 'center',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },

  scroll: {
    flex: 1,
    backgroundColor: '#fafafa',
    marginHorizontal: 16,
    marginBottom: 70,
    borderRadius: 8,
  },
  scrollContent: { padding: 16, paddingBottom: 40 },
  rowBtn: {
    padding: 16,
    backgroundColor: '#888',
    marginVertical: 4,
    borderRadius: 8,
    alignItems: 'center',
  },

  backBtn: {
    position: 'absolute',
    top: 40,
    left: 16,
    padding: 8,
    backgroundColor: '#ddd',
    borderRadius: 8,
  },
});