software-mansion / software-mansion/react-native-screens
[android][expo]: statusBarStyle breaks translucent StatusBar
Nobody has claimed this yet.
- 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
- Make StatusBar translucent via app.config.ts
- add
statusBarStyleto 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
- 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 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