software-mansion / software-mansion/react-native-screens
bug with @react-navigation/bottom-tabs - initial jumping and flickering
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
When I'm using @react-navigation/bottom-tabs with the native stack navigator, the header jumps on android and sometimes flickers on iOS on tab change (on the first render only). But it doesn't happen if I use the JS stack navigator.
I wrapped NavigationContainer with SafeAreaProvider like this:
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<NavigationContainer>
<RootStack />
</NavigationContainer>
</SafeAreaProvider>
I also patched react-navigation bottoms tabs with this PR applied by @WoLewicki
react-navigation/react-navigation#9772
If I remove initialWindowMetrics jump on Android is gone, but on iOS, the header is still flickering.
it maybe related to this issue
Screenshots
Steps To Reproduce
- Open app.
- Click on Tab2.
- See the position of the header.
Expected behavior
the header should not jump on android and flicker on iOS(on initial render).
Actual behavior
on initial render, header jumps on Android and flickers on iOS
Reproduction
reproduction repo:
https://github.com/IvanIhnatsiuk/native-stack-bottom-jump
Platform
- iOS
- Android
- Web
- Windows
- tvOS
Workflow
- Managed workflow
- Bare workflow
Package versions
| package | version |
|---|---|
| react-native | 0.66.4 |
| @react-navigation/native | 6.0.9 |
| @react-navigation/native-stack | 6.2.5 |
| react-native-screens | 3.10.2 |
| react-native-safe-area-context | 3.3.2 |
| react-native-gesture-handler | 2.2.0 |
| react-native-reanimated | 2.3.1 |
| @react-navigation/bottom-tabs | 6.0.9 |
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.
Research direction
Start with the linked reproduction repository and run the flow using @react-navigation/bottom-tabs with the native stack, comparing initialWindowMetrics behavior in SafeAreaProvider against the JS stack. Reproduce the first tab change on Android and iOS, then verify that the header no longer jumps or flickers on the initial render.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100