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

[iOS] Keyboard goes outside screen bounds when navigation back via navigation.goBack()

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

Nobody has claimed this yet.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Description

Description

When navigating back via navigation.goBack() from a custom back button, the keyboard goes outside the screen bounds during the transition.

However, when navigating back using the native header back button, the keyboard stays within the screen bounds and behaves correctly.

Expected behavior: The keyboard should stay within the screen bounds when going back via navigation.goBack(), same as when using the native header back button.

Current behavior: The keyboard visually exits the screen frame when going back via navigation.goBack().

Screenshot 1

This behavior occurs when navigating back via navigation.goBack().

Image

Screenshot 2

This behavior does NOT occur when navigating back via the native header back button.

Image

Video

https://github.com/user-attachments/assets/1342eceb-a471-4216-b0fa-2cc59e6bc448

This issue occurs in both React Native and Expo, across all versions.

Steps to reproduce
  1. Open a screen that has a TextInput
  2. Tap on the TextInput so the keyboard appears
  3. Tap the custom back button that calls navigation.goBack()
  4. The keyboard goes outside the screen bounds during the transition
Snack or a link to a repository

https://snack.expo.dev/@zo_hayk/keyboard-goes-outside-screen

Environment

package version
@react-navigation/native 7.2.1
@react-navigation/native-stack 7.14.9
@react-navigation/stack 7.8.8
react 19.2.3
react-native-screens 4.24.0
react-native 0.84.1
react-native-safe-area-context 5.7.0
Screens version

4.24.0

React Native version

0.84.1

Platforms

iOS

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 Expo Snack and reproduce the transition using a TextInput, a custom button calling navigation.goBack(), and the native header back button for comparison. Trace the navigation.goBack() and native header paths in react-native-screens, then verify that the keyboard remains within the screen bounds during the custom-back transition on iOS.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.