software-mansion / software-mansion/react-native-screens

[Android] TextInput immediately blur on first focus after changing tab using React Navigation Material Top Tabs

Open
#1,606 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:android repro-provided
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.

https://user-images.githubusercontent.com/71256843/193735107-5df85da3-e34f-4f31-ab9d-9fe789c18d9d.mp4

Steps to reproduce
  1. Create either a Stack or Native Stack Navigator with a Main Screen
  2. Create a Material Tob Tab Navigator inside the Main Screen
  3. Create and append any more than 2 screens to the Material Tob Tab Navigator, these screens can contain a TextInput
  4. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.