Skip to content
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

Status Bar changes occur instantly on pushing onto a StackNavigator, but are delayed on pressing the back button #3964

Closed
Rob117 opened this issue Apr 12, 2018 · 8 comments

Comments

@Rob117
Copy link

commented Apr 12, 2018

Current Behavior

The code is available in the snack, but essentially we have a simple StackNavigator with two screens. Each screen has a StyleBar barStyle defined in its render method. Example:

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'Gray'}}>
      <StatusBar barStyle="dark-content" />
        <Text>Details Screen</Text>
      </View>
    );
  }
}

When transitioning down the stack navigator, the status bar style works as expected and changes the status bar at the moment the screen transition begins. When transitioning up the stack navigator (using the goBack navigation option or pressing back in the default header), the status bar style does not work as expected and instead changes the color only at the end of the screen-transition animation.

Expected Behavior

I expect that if the colors of the status bar are signaled to change in a renderer, that they should always change at the beginning of a transition animation regardless of the version the navigator progresses in.

Note I did see somewhere that StatusBar options could be defined directly in the stack and not only on individual screen components. If that solves my issue and removes the animation delay, a quick code snippet or a point in the right direction would be highly appreciated.

How to reproduce

Snack with bare-minimum code

Notice that on either android or iOS, the original home screen status bar is light (on iOS, this should make it nearly invisible on the white background).

Click the button in the center of the screen "Go to details."

Notice that the status bar immediately changes color before the screen change animation is complete.

Click the back button on Android or the back button in the header on iOS.

Notice that the status bar does not change color until the transition animation is complete.

Your Environment

software version
react-navigation 1.5.11
react-native 0.54.4
node 9.5.0
npm or yarn Yarn 1.3.2, npm 5.6.0

@Rob117 Rob117 changed the title Status Bar changes occur instantly on navigating down a StackNavigator, but are delayed on pressing the back button Status Bar changes occur instantly on pushing onto a StackNavigator, but are delayed on pressing the back button Apr 13, 2018

@EyMaddis

This comment has been minimized.

Copy link

commented Apr 13, 2018

The StatusBar only updates when the screen is (re)rendered.
When a new screen is shown, it needs to render everything first, updating the StatusBar.
When you go back there is no need to rerender as the view is already in cache.

You can unify the experience using the withNavigationFocus this will add the isFocused property when the view is loaded.
This leads to only update the StatusBar whenever the screen is completely shown.

I updated your snack to show this: https://snack.expo.io/Hkr8Vn0sG

@Rob117

This comment has been minimized.

Copy link
Author

commented Apr 14, 2018

Awesome! Thank you for the advice, that was very helpful. I'll close the issue. Should I make a PR for the docs to address this, or should I wait for 2.0 docs to be official?

@Rob117 Rob117 closed this Apr 14, 2018

@Rob117

This comment has been minimized.

Copy link
Author

commented Apr 15, 2018

Actually, I made a bit of an error, and I need to re-open the issue. I need a way to update the status bar for a given screen the moment that the back button is pressed. Is there a way to do that? So, for example, when the back button is pressed, before the previous screen is re-rendered the status bar changes to some static option for that screen.

@Rob117 Rob117 reopened this Apr 15, 2018

@EyMaddis

This comment has been minimized.

Copy link

commented Apr 18, 2018

I think you could implement this in static navigationOptions = () { .... StatusBar.setBarStyle(...) } in the target component.
However, you would have to manually reset the style when you leave the route, something that would be automatically handled by using <StatusBar ... />

@brentvatne

This comment has been minimized.

Copy link
Member

commented Apr 26, 2018

react-navigation/rfcs#19 - let's discuss on here

@brentvatne brentvatne closed this Apr 26, 2018

@simonsisay

This comment has been minimized.

Copy link

commented Dec 5, 2018

@Rob117 did you resolve your issue ??

@Rob117

This comment has been minimized.

Copy link
Author

commented Dec 13, 2018

@simonsisay No.

So, you could set the status bar when you change screens via navigation focus, but it's gonna be ugly it it works at all, and I certainly haven't done anything with it in RN 3

@valyakin

This comment has been minimized.

Copy link

commented Feb 1, 2019

If even withNavigationFocus didn't do a trick for you here is a workaround:
{ this.props.isFocused && <StatusBar backgroundColor='#e5e5e5' barStyle="dark-content"/> }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.