Press Events Not Working on Screens with Interactive Components

[kenmoh]

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 am experiencing an issue where press events do not trigger on screens that contain interactive components such as Button, TextInput, when using react-native-bottom-tabs. The issue occurs consistently across different screens within the tab navigator.

Library version

0.8.3

Environment info

System:
  OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
  Memory: 1.37 GB / 5.69 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn:
    version: 1.22.22
    path: /snap/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.77.0 is now available (your project is running on v0.76.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.77.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.6&to=0.77.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=linux".

Steps to reproduce

Steps to Reproduce

1. Clone the Repository:

git clone https://github.com/kenmoh/rnbt-demo
cd rnbtdemo

2. Install Dependencies:

npm install

3. start:

npx expo start

4. Navigate to the Application:

• Open the app on your device or emulator.
• Click on the Profile tab

5. Attempt to Interact:

• Try pressing the interactive components(TextInputs, Button). Observe that the press events do not trigger as expected.

Expected Behavior

Press events should work correctly on all screens, allowing users to interact with buttons and other interactive components.

Actual Behavior

Press events do not work on screens with interactive components. The components do not respond to touch events.

• Platform: Android

Reproducible sample code

import { StyleSheet, View, TextInput, Button } from 'react-native';

export default function TabTwoScreen() {

  return (
    <View style={[styles.container]}>
      <TextInput keyboardType='email-address' placeholder='Email' style={[styles.inputContainer]} />
      <TextInput placeholder='Username' style={[styles.inputContainer]} />
      <TextInput secureTextEntry placeholder='Password' style={[styles.inputContainer]} />
      <View style={{ width: '90%', alignSelf: 'center' }}>
        <Button title='Submit' color={'black'} onPress={() => console.log('Sumitted')} />
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 10,
    marginTop: 100,

  },
  inputContainer: {
    width: '90%',
    alignSelf: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'skyblue',
    borderCurve: 'continuous',
    borderRadius: 10,
    paddingVertical: 15,
    paddingHorizontal: 10,
    backgroundColor: '#fff',
  },
});

[okwasniewski]

Hey,

You have to use Expo Prebuild.

So in order to run the app use:

1. npx expo prebuild --clean

2. npx expo run:android

It worked for me without any issues.

[kenmoh]

I'll give a try and give feedback.
I'm using development build on a physical device currently.

[kenmoh]

Still the same issue on a physical device(Android)

[okwasniewski]

Thanks @kenmoh does it happen on simulator too or only on physical device?

[chitrakshtarun]

Commenting to follow this thread as I'm experiencing the same issue.

Just checked on my build (EAS Android Build - Development Profile), the issue seems to arise on physical mobile devices. Android simulator seems to be fine.

[chitrakshtarun]

Hi, adding to this, tested if this bug exists in preview builds but encountered this bug:

While switching between tabs with react-native-bottom-tabs, navigating between tabs caused the app to be a single solid color. This issue does not occur on a preview build made using JS Bottom Tabs.

Video reproduction

0:00 - 0:09 react-native-bottom-tabs; cannot navigate between tabs
0:09 - 0:17 JS bottom tabs; can navigate as expected.

Might be related issues, as the only code changed between the two preview builds is the app/(tabs)/_layout.tsx file. If required, I can create a separate issue and try providing a better reproducible example for this.

Preview_Tab_Bar_Bug.mp4

[okwasniewski]

@chitrakshtarun This looks like a different issue. And as far as I understand it also happens only on a device? Are you in release mode?

I'm trying to pinpoint what's causing this because I can't reproduce this.

[chitrakshtarun]

Hi, yep this is in preview mode [app build on EAS using eas build --profile=preview --platform=android]. For the preview build, this issue also occurs on an Android simulator.

On the development build, the navigation works as intended for both JS tabs and react-native-bottom-tabs and this issue doesn't occur.

I can try to see if I can reproduce this issue in a blank project and then create another issue with a reproducible example

[okwasniewski]

@chitrakshtarun To narrow things down can you check if it happens in Release? I'm not sure how the "preview" build differs from the release but it shouldn't affect navigation.

[chitrakshtarun]

Sure, I'll try with the release build once to see if it causes the same issue

[okwasniewski]

Here is a recording of running a linked reproduction repository on a real device (Pixel 7) in development mode.

Press events are working as expected.

CleanShot.2025-02-05.at.15.53.58.mp4

[micahlt]

I can replicate the issue with press events as well. Really odd behavior. Only appears on physical devices. The screen recording below is from a release build.

screen-20250205-085446.mp4

[okwasniewski]

@micahlt That's really weird. I hope it's not happening only on some devices.. Just to be sure can you check if this issue was present before 0.8.0?