useAnimatedKeyboard causes navigation bar jump with React Navigation on Android
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 38/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react-native, typescript
- Domain
- mobile
Research direction
Start with the linked Snack and reproduce the transition on Android using the listed React Native, Reanimated, and React Navigation versions. Trace the screen that calls useAnimatedKeyboard and compare navigation-bar behavior with and without that call. Done means the navigation bar no longer jumps when entering that screen while the hook remains enabled.
Written by the indexing model from the issue text.
Description
Description
My navigation bar unexpectedly jumps or shifts when transitioning to a screen implementing useAnimatedKeyboard on Android. This issue disappears when the hook is removed.
Video demo
With useAnimatedKeyboard
https://github.com/user-attachments/assets/b5845fbe-60db-4fa5-a9e0-1fc2f53276d8
Without useAnimatedKeyboard
https://github.com/user-attachments/assets/c1480f5c-3ea7-4503-84ef-268273544686
The only code change between those 2 videos was removing this line in the screen I transitioned to.
const keyboard = useAnimatedKeyboard();
I was able to reproduce the issue on a real device as well as on an Android emulator.
Steps to reproduce
1. Set up a project with React Navigation and Reanimated.
2. Add useAnimatedKeyboard to a component
3. Run the app and navigate to the screen implementing the hook.
Snack or a link to a repository
https://snack.expo.dev/@alexmngn/supportive-yellow-watermelon
Reanimated version
3.16.7
React Native version
0.75.4
React Navigation version
7.0.14
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native
Architecture
Paper (Old Architecture)
Build type
Debug app & dev bundle
Device
Android emulator
Real device
Device model
Galaxy A22
Acknowledgements
Yes
- Dominant language
- TypeScript
- Stars
- 11k
- Forks
- 1.5k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 172
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.
More from software-mansion/react-native-reanimated
-
Missing info Missing repro
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
software-mansion/react-native-reanimated#10560 · 2 comments ·
-
Maintainer issue Missing info Missing repro
software-mansion/react-native-reanimated#10574 · 2 comments · 1 assignee ·
-
Platform: iOS Repro provided
software-mansion/react-native-reanimated#10543 · 1 comment · 1 assignee ·
-
Platform: Android Repro provided
Difficulty 4/5 3-5 days Newbie friendliness 52/100
-
Maintainer issue
Difficulty 3/5 1-2 days Newbie friendliness 35/100
All issues in software-mansion/react-native-reanimated
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·