callstack / callstack/react-native-pager-view

[iOS] Incorrect safe-area inset inside PagerView with native search bar since 9.0.2

Open
#1,142 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.4k
Forks
476
Avg merge
10d 21h
Merged PRs (30d)
2

Description

## Environment

- React Native: 0.87.1
- React: 19.2.3
- react-native-pager-view: 9.0.4
- react-native-screens: 4.27.0
- react-native-safe-area-context: 5.9.1
- @react-navigation/native: 7.3.18
- @react-navigation/native-stack: 7.18.10
- Platform: iOS

## Description

Hi! Thank you for your library and your time!
I'm facing an issue

https://github.com/iliapnmrv/react-native-pager-view-ios-searchbar-inset/blob/main/README.md

A `FlatList` gets an incorrect safe-area inset when it is rendered inside `PagerView` on a native-stack screen with `headerSearchBarOptions`.

The same `FlatList`, rendered directly on the screen without `PagerView`, is laid out correctly.

This appears to be a regression introduced in `react-native-pager-view` 9.0.2.

https://github.com/user-attachments/assets/90ca6b92-2368-4d00-8a1b-08c16a41364a

Contributor guide

Open the contributing guide

Research direction

Start with the linked reproduction README.md and compare the FlatList layout inside PagerView with the direct-screen case on iOS using the listed dependency versions. Trace safe-area handling around the regression introduced in react-native-pager-view 9.0.2; done means the embedded FlatList receives the correct inset while headerSearchBarOptions remains enabled.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.