-
-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Play nicely with translucent StatusBar on Android #12
Comments
I just wanna +1 this because I just used react-navigation for the first time (with Exponent) and realized that I needed to handle android statusbar paddingTop unlike when I use ex-navigation where it handles it for me. It would be really nice for new users to get that functionality out of the box 👍🏿 |
@datwheat I ran into this same issue with react-navigation and Exponent. Can you provide an example of your code that fixed this? I'm not understanding where to add the paddingTop. I basically followed the instructions here to use react-navigation. |
@lyahdav Here's a few ways you can do it. TabNavigator
StackNavigator
DrawerNavigator |
The way I've been going for now is to have the statusBar as always transparent, with a color of transparent:
In the styles for the navigators, add the following. It allows for a different header color (Android):
EDIT: Seems this only works with TabNavigator for now. |
For handling this within react-navigation, it would probably be easiest if control of the |
Any news on this? I could only get the padding doing something like the following and the status bar does not reflect the color of the header
( |
@laxgoalie392 you should use paddingTop instead of marginTop ;-)
|
I have the same problem, but in iOS. The given solution works on Android, but not on iOS. Here's my main.js:
Uncommenting paddingTop in styles.container works, but this moves reponsability for fixing this into each separate screen. Here's my package.json:
On iOS this looks like this: |
@brentvatne is there a corresponding PR for this in Expo or is the work going to be handled here? |
I see that there are solutions such as and #1168 (comment) but this is not very optimal. |
@awitherow - it will be handled on here, @skevy will work on it soon |
@DavidBadura Why are you using 60 instead of 56 for height? I ask because react-navigation's APPBAR_HEIGTH constant is 56 for android. Until skevy resolves this issue, I am using:
|
I'm web developer with a good experience in react, but completely new to
My solution was to separate the concerns...
and here is my
This address all the issues for me, and I can use different navigators, or position them top or bottom and my status bar will be position and styled as expected. In the future if I want to modify the style (such as
into its own component and use the react ways of component communication (props and callbacks) to perform any necessary changes. Since I'm new would love to know if this is a good solution or if not the reasons why it might not be. |
@marcos-abreu I have a couple months worth of react-native experience and a few more of react. For what it's worth, your solution seems just fine to me. As for why mine wasn't working, I recently made an edit to my answer without remembering that Also, I am not experiencing problem 3 with my posted changes. |
Hey @Palisand, thanks for replying and reviewing my solution. As for the problems I experienced when testing your solution (specially regarding 3) was that |
@marcos-abreu Hmmm... you're absolutely right. My |
Hey people I might have found a way to solve that problem. I was having a terrible time trying to configure the "keyboard adjustresize" with Textinput and in the expo.io forum I discovered that if you fill the app.json with the field
It not only makes the "keyboard adjustresize" works but also does fix this translucent issue. Update: Update 2: |
For Expo users looking for a simple code sample to make sure content appears under the status bar. const App = StackNavigator({
Home: { screen: HomeScreen },
About: { screen: AboutScreen },
}, {
navigationOptions: { headerStyle: { marginTop: Expo.Constants.statusBarHeight } }
}) |
On Android, to get this working really nicely I did the following: Edit android/app/src/main/res/values/styles.xml
Note: #1e000000 = rgba(0, 0, 0, 0.3) This makes the statusBar (and bottom navigation bar (soft keys) if present/needed) transparent. Now on each screen which uses the
This now makes your Header act as normal, however your StatusBar area is actually transparent with a black opacity over the top. This now allows you to do what you want; change colors dynamically, have an image behind it etc. |
@ro-savage I guess if you go that way, when you need the "keyboard adjustresize" (that auto scroll to the inputfield when the keyboard appear), and you fix with that thing I said, you will get double sized status bar. But it happens only with the new create-native-react-app using expo framework. |
Getting the correct status bar underlap height is actually pretty complex.
I think the long term solution is going to be to make react-native support By the way, just to make everyone's lives worse 😉. For awhile now Android's soft keys (the back/home/recents buttons at the bottom of the screen which are software based on some devices) have had the ability to set them as translucent as well; which is fine since that's only a problem if the app author does it (at which point they may complain about bottom aligned tabs). Except, the new iPhone X now has a soft home indicator instead of the home button which underlaps just like the StatusBar, and that underlapping footer is mandatory. And just to rub salt in that, in landscape mode you also need to inset from the edges of the screen, except this horizontal inset should be done in your content instead of the views that contain them (so things like dividers still span to the edges). So a |
Is this a terrible idea? Edit: yes it is.
So surely the content will not flow underneath the bar, but at least it saves me from having to add padding to all my screens. |
It'll be great if SafeAreaView could support translucent status bar on Android. |
@leethree sorry, I just found this when I was trying to find a solution to my status bar problem, but I don't quite understand, what´s SafeAreaView, is it some under the hood implementation or do we need to implement it in our current code? |
@JuanCAlpizar SafeAreaView was introduced in #2833 to support iPhone X paddings. Also see this comment from @davepack : |
This should be a pretty old issue. Is there any update on this? I was using the following code to fix it (can't remember why 64):
But it is not working desirably after that iphone x support update. (64 height in ios becomes too large) Either way I will fix it manually. But I think this should be supported as soon as possible as |
I am guessing that the source of the extra height comes from here: Just FYI, for anyone having the same issue after the update. |
I have found a quick inline fix to the android translucent status bar in stacknavigator.
The syntax is from es6, which works just like Object.assign. Without using this, there will be 3 types of styles to check and set separately (iphone, iphone x, android). There are currently 2 pull requests trying to fix this: |
resolved in 1.0.0-beta.26 |
Does anybody have a quick fix for someone running with expo + crna? @carsonwah's fix didn't work for me. |
+1 |
I'm using
With this versions, to avoid navbar height overwrap on ANDROID, I'm using code below. const HomeTabScreen = createStackNavigator(
RouteConfig,
{
mode: 'card',
navigationOptions: {
headerTitleAllowFontScaling: true,
...Platform.select({
android: {
headerStyle: {
marginTop: -Expo.Constants.statusBarHeight,
},
},
}),
},
},
) |
Why is this closed when the issue is not properly resolved? I just started an Expo app and it definitely does not play nicely with the top bar. |
I can confirm it is definitely still an issue! same here with CRNA |
@Darker @kemenesbalazs - can you elaborate in a new issue? thanks! |
In Expo we use a translucent StatusBar by default on Android, and some normal React Native projects may do this as well because it makes it easier to reason about cross-platform since the iOS StatusBar is always translucent.
We may need to upstream a constant to React Native that we can use to check if the StatusBar is translucent, and then add any necessary paddingTop to the navigation bar when it is.
The text was updated successfully, but these errors were encountered: