StatusBar resets its props (translucent, backgroundColor, etc) when app was reopened on Android

[thymikee]

This issue was transferred from React Native repository: react/react-native#24596

🐛 Bug Report

StatusBar component resets its props when application was reopened on Android.

There are similar issues #19609, #16582 that were marked as closed.
But suggested ways of resolving aren't work for me.

I attach a demo of what actually happening.

I set translucent and orange background color for the StatusBar and start the application. "Welcome to React Native!" text was hidden behind the status bar. Then I pressed the home button and reopened the application again. StatusBar component lost translucent and background color "Welcome to React Native!" text located below the status bar.

To Reproduce

• Initialize a new React Native project with react-native init
• Add StatusBar component with translucent and background color
• Start the application with react-native run-android
• Press Home button
• Reopen the application

Expected Behavior

StatusBar component should keep its state when the application was reopened.

Code Example

Add the following StatusBar component:

<StatusBar backgroundColor={'orange'} translucent={true} />

Full code example repo: statusBarTest

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Memory: 52.02 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash

Binaries:
Node: 10.13.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.1, 25.0.2, 26.0.1, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom

IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.1/10B61 - /usr/bin/xcodebuild

npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.5 => 0.59.5

npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.2.2

[Mase9527]

Me too，how to solve it？thanks

[Mase9527]

Same here.
Is this a bug?
Some solution at the moment?

[OlivierFreyssinet-old]

Same problem here

[OlivierFreyssinet-old]

This is more a workaround than a real solution to this problem, but by using the StatusBar static methods (setTranslucent, setBackgroundColor etc.) rather than the StatusBar component props you can achieve a consistent behavior when the app restarts.

[Mase9527]

@OlivierFreyssinet
How do you solve this problem?

[thymikee]

The solution (in my experience) is not to use <StatusBar /> as a component, since it's buggy. Use StatusBar imperatively as a module in your lifecycle methods.

I'd actually consider removing StatusBar component. Would make it easier to use and maintain because of smaller API surface.

[dmtrKovalenko]

Actually the way it is working - we can not persist state for the component between renders. I have opened #17 to discuss it. This is misconception came from the core - status bar changes are mutations. Not state

[duhwcarvalho]

I need to use componet MyStatusBar.

For that i create StatusBar.js using the static methods and import in index.js located in src folder.

import React from 'react';
import { View } from 'react-native';
import Routes from './Routes';
import './Config/StatusBar';
import MyStatusBar from './Components/Shared/MyStatusBar';

const App = () => (
    <View style={{ flex: 1 }}>
        <MyStatusBar backgroundColor={'#FFFFFF'} />
        <Routes /> 
    </View>
);

export default App;

Same problem here:

The solution was to transform App in class component and use componentDidMount:

import React, { Component } from 'react';
import {
  View,
  StatusBar,
  Platform
} from 'react-native';
import Routes from './Routes';
import MyStatusBar from './Components/Shared/MyStatusBar';
import './Config/StatusBar';

class App extends Component {

  componentDidMount() {
    this.statusBarConfig()
  }

  statusBarConfig = () => {
    Platform.OS !== 'ios' && StatusBar.setTranslucent(true);
    Platform.OS !== 'ios' && StatusBar.setBackgroundColor('transparent');

    StatusBar.setBarStyle('dark-content');
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <MyStatusBar backgroundColor={'#FFFFFF'} />
        <Routes />
      </View>
    );
  };
};

export default App;

i'm not proud 😆

[cubitouch]

Hi there, ran onto the same problem today and my workaround was to use the AppState listening at "focus" event:
AppState.addEventListener('focus', () => { ... }

Hope that helps...

[SakuraWood]

Hi there, ran onto the same problem today and my workaround was to use the AppState listening at "focus" event:
AppState.addEventListener('focus', () => { ... }

Hope that helps...

works for me