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

bug with @react-navigation/bottom-tabs - initial jumping and flickering

Open
#1,276 34 comments 19 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:android platform:ios repro-provided
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

https://user-images.githubusercontent.com/86000012/150523094-f45c0d6d-b059-45f1-aaae-2f7441b1f0a3.mov

https://user-images.githubusercontent.com/86000012/150523458-835419ca-5f86-4762-a677-6060101566a1.mov

Steps To Reproduce

  1. Open app.
  2. Click on Tab2.
  3. 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

  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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.