Custom Tab Bar with position: absolute blocks all touch events on the screen

[dennis-Softfruit]

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

I'm creating a custom tab bar that should:

• Have a fixed width (not full screen width)
• Be positioned at the bottom of the screen with position: absolute
• Allow touch events to pass through to the underlying content

However, when I use position: absolute for the tab bar wrapper, all touch events (scroll, press, etc.) on the screen become unresponsive. When I remove position: absolute, touch events work but the tab bar takes full width which I don't want.

Expected Behavior

• Tab bar should have custom width and be positioned at bottom
• Touch events should work normally on the rest of the screen
• Content should be visible underneath the tab bar

Current Behavior

• Tab bar appears correctly with custom width and bottom positioning
• All touch events on the screen are blocked
• Scroll and press interactions don't work

Library version

"^0.10.0"

Environment info

"expo": "53.0.20",
"react-native": "0.79.5",
"react-native-bottom-tabs": "^0.10.0",

Steps to reproduce

1. Create a custom tab bar with position: absolute and custom width
2. Place it at the bottom of the screen
3. Try to scroll or touch content behind/around the tab bar
4. Observe that touch events are blocked

Reproducible sample code

export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.tabContainer}>
        {/* Tab bar content */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: width,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent",
    position: "absolute", // ← This breaks touch events
    bottom: 0
  },
  tabContainer: {
    flexDirection: "row",
    borderRadius: 100,
    width: s(200), // Custom width
    height: vs(55),
    // ... other styles
  },
});

and using the tab like :

 <Tabs
      activeIndicatorColor={Colors[colorScheme ?? "light"].tabIconDefault}
      hapticFeedbackEnabled={true}
      initialRouteName="(home)"
      screenLayout={TabLayout}
      minimizeBehavior="automatic"
      tabBar={Platform.OS === "ios" ? undefined : (props) => <CustomTabBar {...props} />}
    >

[okwasniewski]

Hey, did you try to add pointerEvents='box-none' to the styles of wrapper? It should fix the issue.

[dennisnjd]

I tried it already. Didn't worked out.