[Android] KeyboardAwareScrollView causes content to disappear

Open
#3,640 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
android, react-native, typescript
Domain
mobile-dev

Research direction

Start with the linked demo repository and reproduce the issue using yarn install followed by yarn android. Compare the Android form sheet with fitToContents, an autofocus input, and KeyboardAwareScrollView against the standard ScrollView case described in the report. Done means the form sheet opens with its content visible under the reported conditions.

Written by the indexing model from the issue text.

Description

platform:android repro-provided
Description

This issue requires several different conditions but it is reproducible so I figured it was worth opening an issue for here.

Required conditions:

  • Android (issue not present on iOS)
  • A sheet with fitToContents detent
  • A large amount of content exceeding the screen height
  • A KeyboardAwareScrollView (from react-native-keyboard-controller) containing an autofocus text input

When these conditions are present, the form sheet fails to open properly as the content "blows out" off screen. Closing and re-opening the keyboard causes the content to appear normally. Disabling autofocus prevents the issue from occurring. As does using a standard RN ScrollView

Admittedly I realize that putting a scroll view inside of a sheet without a fixed parent height could be problematic. But this also feels like something that shouldn't be able to occur. It almost seems like a race condition of some sort with the keyboard appearing at the same time while the initial layout is being calculated.

Another thing to note is that sometimes the issue does not occur on the first attempt after the app is opened. It happens consistently after that though.

https://github.com/user-attachments/assets/7a88e968-b054-4035-8ab6-f01e2509de2d

Steps to reproduce
  1. Clone the demo repo
  2. Run yarn install
  3. Run yarn android
  4. Tap the 'Open formsheet' button (might have to do this twice)
Snack or a link to a repository

https://github.com/iankberry/android-formsheet-fittocontents-issue

Screens version

4.23.0

React Native version

0.81.5 (Expo 54)

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

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.

More from software-mansion/react-native-screens

All issues in software-mansion/react-native-screens

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.