I've been using react-native and react-native-navigation for a long time. I recently updated all of my packages for the first time in 9 months, something I've done many times. After solving all the expected bugs that occur when doing so, I ran into a strange bug that I'm not sure how to solve and assume it has to do with react-native-navigation because of side effects.
I use bottom tabs in my app. Prior to this update, when I setRoot the first bottom tab component loads while the other bottom tabs don't load yet. When I click on another bottom tab the component loads, useEffects fire, etc. This is how it's worked for as long as I remember. But after this update I ran into this strange bug. When I click on any text input on my actual device on the first loaded component, the keyboard opens as you would expect and then all of bottom tab components load even though I haven't visited them. I see the logs fire from each component.
Something else that is strange is that I use the library react-native-tab-view, which is from react-navigation. react-native-tab-view is used in one of the other bottom tabs. What is happening is I click on a text input in the first component like I mentioned, the keyboard opens, and then the keyboard closes. After commenting out different parts of the components I noticed that when I commented out the react-native-tab-view code in the other bottom tab component, the keyboard didn't auto close. So here's my theory:
I press a text input, the keyboard opens, and for whatever reason all the bottom tab components load before actually visiting them (I'm assuming this related to how react-native-navigation interacts with react-native)
In one of the components react-native-tab-view code loads which automatically closes the keyboard. This is probably a react-native-tab-view issue where it auto closes an open keyboard when it loads, but I thought I'd include that here in case it is helpful. But the main issue is that the bottom tab components are unexpectedly loading when the keyboard opens.
Thanks!
What was the expected behaviour?
No response
Was it tested on latest react-native-navigation?
[X] I have tested this issue on the latest react-native-navigation release and it still reproduces.
Help us reproduce this issue!
No response
In what environment did this happen?
React Native Navigation version: 7.38.3 (Including previous minor versions)
React Native version: 0.73.5
Has Fabric (React Native's new rendering system) enabled: (yes/no) I believe so because I'm using the latest version?
Node version: v20.11.1
Device model: iPhone 12 Pro
iOS version: 17.3.1
What happened?
I've been using
react-native
andreact-native-navigation
for a long time. I recently updated all of my packages for the first time in 9 months, something I've done many times. After solving all the expected bugs that occur when doing so, I ran into a strange bug that I'm not sure how to solve and assume it has to do withreact-native-navigation
because of side effects.I use bottom tabs in my app. Prior to this update, when I
setRoot
the first bottom tab component loads while the other bottom tabs don't load yet. When I click on another bottom tab the component loads, useEffects fire, etc. This is how it's worked for as long as I remember. But after this update I ran into this strange bug. When I click on any text input on my actual device on the first loaded component, the keyboard opens as you would expect and then all of bottom tab components load even though I haven't visited them. I see the logs fire from each component.Something else that is strange is that I use the library
react-native-tab-view
, which is fromreact-navigation
.react-native-tab-view
is used in one of the other bottom tabs. What is happening is I click on a text input in the first component like I mentioned, the keyboard opens, and then the keyboard closes. After commenting out different parts of the components I noticed that when I commented out thereact-native-tab-view
code in the other bottom tab component, the keyboard didn't auto close. So here's my theory:react-native-navigation
interacts withreact-native
)react-native-tab-view
code loads which automatically closes the keyboard. This is probably areact-native-tab-view
issue where it auto closes an open keyboard when it loads, but I thought I'd include that here in case it is helpful. But the main issue is that the bottom tab components are unexpectedly loading when the keyboard opens.Thanks!
What was the expected behaviour?
No response
Was it tested on latest react-native-navigation?
Help us reproduce this issue!
No response
In what environment did this happen?
React Native Navigation version: 7.38.3 (Including previous minor versions) React Native version: 0.73.5 Has Fabric (React Native's new rendering system) enabled: (yes/no) I believe so because I'm using the latest version? Node version: v20.11.1 Device model: iPhone 12 Pro iOS version: 17.3.1