Open thymikee opened 5 years ago
Me too,how to solve it?thanks
Same here. Is this a bug? Some solution at the moment?
Same problem here
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.
@OlivierFreyssinet How do you solve this problem?
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.
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
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 😆
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...
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
This issue was transferred from React Native repository: https://github.com/facebook/react-native/issues/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
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