When debugging on an android device the buttons do not work on the bottom tab navigator.

[michaelypesold]

Current Behavior
When running the app in normal mode the buttons on the bottom tab work and change screens and the selected tab is highlighted. When you shake the phone and enable debugging the buttons stop working and you cannot change screen.

Expected Behavior
That the bottom navigator works the same in both normal mode and debugging mode.

How to reproduce
I have created a basic repo which demonstrates the problem exactly with all the latest libraries.
Even did it with the new react-native version as it came out today although it does the same on the previous version.

Git repo
https://github.com/michaelypes/react_navigation_bottom_tab_bug

Your Environment

software	version
iOS or Android	Android physical device Oneplus 3 and a Samsung S10
@react-navigation/native	5.1.3
@react-navigation/bottom-tabs	5.2.4
react-native-screens	2.4.0
react-native	0.62.0
expo	na
node	13.7.0
npm or yarn	yarn 1.21.1

[satya164]

https://reactnavigation.org/docs/troubleshooting#app-is-not-working-properly-when-connected-to-chrome-debugger

[michaelypesold]

I read the documentation. It works on an iOS physical device and also if I install the material bottom tab instead then that works so not sure you can blame it entirely on Chrome. With regard to safari as a debugger does that work the same with both iOS and Android.

[micheilsgrey]

is VS Code uses same debugger , beacause i have same problem too. And how can i now debug my app if i cant switch between screens ?

[michaelypesold]

is VS Code uses same debugger , beacause i have same problem too. And how can i now debug my app if i cant switch between screens ?

Is this only in android?

[micheilsgrey]

is VS Code uses same debugger , beacause i have same problem too. And how can i now debug my app if i cant switch between screens ?

Is this only in android?

didn't test on iOS

[mahajan8]

Facing the same issue with react navigation 5 bottom tabs.
Tabs do not work when app is connected to remote debugger.

The link shared explains issues related to timing. But here the navigation is not working at all. And no one would be able to debug without navigating. Please help with a solution.

https://reactnavigation.org/docs/troubleshooting#app-is-not-working-properly-when-connected-to-chrome-debugger

[Artem-Kushch]

@michaelypes try to use 0.61.5 version of react-native, for me it is fixed the problem.

[carinlynchin]

also have this issue... only with debugger on for emulator. As soon as I stop debugging, nav works fine.

[vassbg]

I have this issue as well. Every button works except for bottom tab navigator!
If I switch to material bottom tab navigator - the problem disappears.
It really seems like this problem is related to the navigator and not to debugger!

[tobikl1]

Solution (for me)

This behaviour is related to this issue:
facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings
Settings -> System -> Date & time -> Automatic date & time
Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling
adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

[abhisheq6u]

Solution (for me)

This behaviour is related to this issue:
facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings
Settings -> System -> Date & time -> Automatic date & time
Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling
adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

Solution (for me)

This behaviour is related to this issue:
facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings
Settings -> System -> Date & time -> Automatic date & time
Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling
adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

Doesn't work for me. There's always atleast 1 second difference.

[tskopek]

Doesn't work for me. There's always atleast 1 second difference.

Same for me. One second difference. I'm using a physical device.

$ adb shell "date" && date
Mon Jun 8 11:40:44 EDT 2020
Mon Jun 8 11:40:43 EDT 2020

[tskopek]

Turning "Use network-provided time" in the Date & Time settings off and on fixed it for me

[Charlicus]

Upgrading from react-native from 0.62.2 to 0.63.3 fixed it for me...

[Imperio8]

Had same issue. Switching Automatic Date & Time off and on on my physical device didn't fix this. I noticed the bug was on my emulator as well, so what I did was switch the automatic time on my machine (windows 10) off and on. It worked instantly!

[MahmudHasanMenon]

Solution (for me)

This behaviour is related to this issue:
facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings
Settings -> System -> Date & time -> Automatic date & time
Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling
adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

Not solve for me . I am facing this problem when debugger is open. But createMaterialBottomTabNavigator has no issue.

[milayek86]

Simpley restert both the devices. it will solve your time issue and so the debugger problem also.
It works for me and hope it will works for you to. :)

[muhammadashfaq]

For me, Changing the browser for debugging from Mozilla Firefox to Google Chrome fixed the problem for me

[gavinharris-dev]

I managed to fix by triggering the Android Emulator to use the date from the host (Mac OS):

adb -e shell su root date `date +"%m%d%H%M%y"`

https://stackoverflow.com/a/10385337/5018798

[sheyDev]

Solution (for me)

This behaviour is related to this issue:
facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings
Settings -> System -> Date & time -> Automatic date & time
Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling
adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

This is crazy. It works! Thank you

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[heedaelee]

Solution (for me)

This behaviour is related to this issue: facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings Settings -> System -> Date & time -> Automatic date & time Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

it doesn't work for me. though i set this, Settings -> System -> Date & time -> Automatic date & time 3seconds difference between my android device and Mac pc time was there.
so i turn same wifi network between Mac and Phone and in my smartphone, i turn on AirPlane mode and off, and then i set
Settings -> System -> Date & time -> Automatic date & time again. after that, i can see two time set was synchronized
.

and then tab started working on debugger mode

[SeonWooPet]

Solution For me
( I use react navigation 6 )

@tobikl1
as he mentioned, when we tab the button 'tabLongPress' is fired.

so, I could catch that and just act like tabPress.

<BottomTab.Navigator
      screenListeners={({ navigation }) => ({
        tabLongPress: (e) => {
          navigation.jumpTo(e.target.split('-')[0]);
        },
      })}
>
...

if you use 'tabLongPress' feature, you need to consider more.

[duether]

Solution (for me)

This behaviour is related to this issue: facebook/react-native#27008

So basically time of device and host machine are out of sync causing a press to appear to the device as a longPress and therefore not navigating.

I resolved it by disabling and reenabling the time synchronisation in my android devices settings Settings -> System -> Date & time -> Automatic date & time Make sure your time on the host gets synced also

You can see if your hosts and devices date & time are out of sync in linux by calling adb shell "date" && date

Aftermath

So i had this problem as well. Tried to replace the tabBarButton component with a custom one in order to see what happens and realized, that in debug mode the onPress event of the touchable never gets fired, while in production mode it does.

Searching google finally revealed the answer to me and after i tested it the tabBarButton component really fires its longPress event instead, as described in the issue above.

Syncing device time and behold - several days of developing without debugger and hours of research and the problem was resolved in 10 seconds. BottomTabNavigation Works again for me.

Hope it helps

What the hell!!!?? It worked 😂

[AbrahamBrookes]

I fixed this by running this in powershell (windows)

adb shell su 0 date $(Get-Date -Format "MMddHHmmyyyy.ss")