callstack / callstack/react-native-paper

React-navigation `presentation: modal` inner Component shift

Open
#3,059 4 comments 2 reactions 0 assignees View on GitHub
repro provided
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour

I noticed this using ``, when menu is visible it is like 8~10px below where it should be, this seems to be the case with all Components inside react-navigation `presentation: modal` on `iOS`.

### Expected behaviour

Components to be where they are on the screen, if you try to use the `onLayout` you will get wrong position of the element

### Code sample

https://snack.expo.dev/9cdSNjwzL

### Screenshots (if applicable)

Presentation modal | Normal page
:-------------------------:|:-------------------------:
|

### What have you tried

This is what I mean by shift:

### Your Environment

| software | version
| --------------------- | -------
| ios or android | 15.2
| react-native | 0.64.3
| react-native-paper | 4.9.2
| node | v12.22.7
| npm or yarn | yarn
| expo sdk | 5.0.3

Contributor guide

Open the contributing guide

Research direction

Start with the linked Expo Snack and reproduce the Menu position inside a React Navigation screen using presentation: modal on iOS. Compare its visual position and onLayout coordinates with the normal-page case; done means components and reported layout positions align in the modal presentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
frontend, 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.