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

[android][expo]: statusBarStyle breaks translucent StatusBar

Open
#1,440 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

missing-repro platform:android
Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Description

Description

I have

  androidStatusBar: {
    translucent: true
  },

in my app.config.ts. This is working fine, but when I use statusBarStyle auto/light/dark, I get a white background on my Statusbar and it won't be translucent/floating over my content anymore.

Screenshots

Steps To Reproduce

  1. Make StatusBar translucent via app.config.ts
  2. add statusBarStyle to any Screen
Expected behavior

Should not break the translucent/floating StatusBar

Actual behavior

It is reverting the translucent StatusBar, thus breaking height calculations as well.

Reproduction

          <Navigator.Screen
            component={HomeStack}
            options={{
                statusBarStyle: 'inverted'
            }}
          />

Platform

  • iOS
  • Android
  • Web
  • Windows
  • tvOS

Workflow

  • Managed workflow (custom-dev-client)
  • Bare workflow (custom-dev-client)

Package versions

package version
react-native 0.68.1
@react-navigation/native 6.0.10
@react-navigation/native-stack 6.6.2
react-native-screens 3.13.1
react-native-safe-area-context 4.2.6
react-native-gesture-handler 2.4.1
react-native-reanimated 2.8.0
expo SDK 45 Beta-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 app.config.ts StatusBar setting and the Navigator.Screen options using statusBarStyle, then reproduce the Android behavior described with a translucent StatusBar. Done means selecting a statusBarStyle no longer removes translucency or breaks the resulting height calculations.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.