software-mansion / software-mansion/react-native-screens
[Android] TextInput immediately blur on first focus after changing tab using React Navigation Material Top Tabs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
Although this problem is mentioned to be fixed in react-native-screens version 3.17.0, but it still happens inside a Material Top Tabs Navigator. As the title said, this problem seems to happen only when the user changes the tab using the top bar on Android. It's worth to mention that the problem occurs only in the screens between the first and last ones.
Steps to reproduce
- Create either a Stack or Native Stack Navigator with a Main Screen
- Create a Material Tob Tab Navigator inside the Main Screen
- Create and append any more than 2 screens to the Material Tob Tab Navigator, these screens can contain a TextInput
- Test by focus the TextInputs
Snack or a link to a repository
https://github.com/TheLastKin/TextInputBug/tree/master
Screens version
3.17.0
React Native version
0.70.1
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
Android emulator
Device model
any Android phone
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked TextInputBug reproduction and reproduce the focus behavior on Android with React Native 0.70.1, react-native-screens 3.17.0, Fabric, and Material Top Tabs. Trace the TextInput focus flow when switching between the middle tabs; done means the input does not immediately blur after the tab change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100