[ios] Tab bar background flashes when scrollEdgeAppearance transparent (without lazy loading)

[beau-house]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

The tab bar background briefly flashes when using scrollEdgeAppearance="transparent" with lazy={false} in two scenarios:

1. When content on a screen reaches the tab bar edge (triggering scrollEdgeAppearance), the background flashes before assuming the barTintColor

2. When navigating from a screen with content below the tab bar to a screen without content below the tab bar

Screen.Recording.2024-11-25.at.11.46.47.AM.mov

Library version

0.6.0

Environment info

System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 152.38 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.10
    path: /usr/local/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman:
    version: 2024.11.11.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/Beau/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10406996
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.2.1
    path: /Users/Beau/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.2
    wanted: ^15.1.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

Clone and build this minimal reproduction. The issue easiest to see when running on a device or simulator with its appearance set to dark mode.

1. Navigate to Screen One that has content which can extend below the tab bar

2. Scroll content up and down to trigger scrollEdgeAppearance - observe tab bar background flash

3. Navigate to Screen Two which has minimal content - observe tab bar background flash again

Reproducible sample code

https://github.com/beau-house/minimal-reproduction-react-native-bottom-tabs

[okwasniewski]

Hey,

Thanks for opening the issue!

When the content on a screen reaches the tab bar edge (triggering scrollEdgeAppearance), the background flashes before assuming the barTintColor

Nothing about this is controlled, this is how it's implemented inside of iOS.

When navigating from a screen with content below the tab bar to a screen without content below the tab bar

This issue is visible in the Apple Store app too 😅

That's why the docs state that if you want to use scrollEdgeApearance you shouldn't use lazy loading

Unfortunately, both those cases are how Apple decided to make things work with this comment and there is nothing we can fix about it (Unfortunately SwiftUI is closed source)

[beau-house]

Hey 👋🏻

Thanks for taking the time to reply. I saw the note in the docs about using transparent or opaque without lazy loading, but thought it might be avoided by setting the lazy={false} screen option.

It's too bad the flash is unavoidable, and wild that it's visible in Apple's App Store app!