Outline
Recently, when I developed the app, I needed to control the StatusBar. in this blog, I’ll introduce how to handle the StatusBar in RN(React Native).
Splash Screen
I use react-native-splash-screen to handle the Splash screen in RN(React Native). if you want to know more details about how to use react-native-splash-screen, see the blog below.
if we don’t configure anything, the StatusBar will show up on the Splash screen. we can configure the settings below to hide the StatusBar on the Splash screen.
iOS
modify info.plist to hide the StatusBar on the Splash screen.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
...
</dict>
</plist>
Android
modify MainActivity.java to hide the StatusBar on the Splash screen.
...
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, true);
super.onCreate(savedInstanceState);
}
...
}
also, modify res/values/styles.xml like below.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowExitAnimation">@android:anim/fade_out</item>
<item name="android:windowFullscreen">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
Android Transparent StatusBar
we need to modify the js level source code to make the StatusBar transparent. modify the component source code in where you want to hide the StatusBar like below.
...
import {
...
StatusBar,
} from 'react-native';
...
export default class Story extends React.Component<Props, State> {
...
render() {
...
return (
<React.Fragment>
<StatusBar barStyle="dark-content" backgroundColor={'transparent'} translucent={true} />
...
</React.Fragment>
);
}
...
}
to make the StatusBar transparent, use backgroundColor={'transparent'} and translucent={true} options in StatusBar component of RN(React Native) like above.
Completed
we’ve talked abouht how to handle the StatusBar in RN(React Native). if I use other way except the way above, I’ll add the contents to this blog.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
