React native android status bar color

Type Definitions​

StatusBarAnimation​

Status bar animation type for transitions on the iOS.

Источник

React Native: Setting a Status bar background color 🎨 on Android and iOS

Jan 27, 2019 · 3 min read

How do you know, iOS doesn’t have a concept of a Status bar background color, although the React Native has a StatusBar Component but only support backgroundColor for Android. So, to be possible on iOS too, we need to create a component to do this.

Let’s get started with the code!z

Before starting…

To change the Status bar background color on iPhone X, XS, XR +++, you need to use the SafeAreaView component by React Native.
So, on the iOS case, this tutorial works only for Devices below the iPhone X (iPhone 8, 7, 6, 5, etc…).

Now, w e really will start with the code!

1- Create React Native App

Creating a new React Native app, from the command line:

2- Create the structure for the component

In your project root, create a structure for your component, like this:

3- Starting the stateless component

Open the file GeneralStatusBarColor.js and start it as a stateless component, like this:

4- Setting the component style

Open the file GeneralStatusBarColorStyles.js and setting the file, like this:

5- Encoding the component

Returning to the file GeneralStatusBarColor.js, let’s improve the code, adding the feature to changing the status bar background color on Android and iOS.

6- Importing and Implementing the component to the main file.js

Open the file App.js and import the component, like this:

After import, replace the render method, like this:

7- Testing the GeneralStatusBarColor component

For iOS, open your simulator and in your project root, run this command:

For Android, open your simulator and in your project root, run this command:

Now, you can see that the GeneralStatusBarColor component working:

I hope you enjoyed. Thank’s for your time. CYA ! o/

Источник

Change Status Bar Background Color in React Native

Sometimes, we need to use a different color on the Application Status Bar on both devices i.e. Android and IOS. In this article, we are going to learn how to change status bar background color in your React Native application. Let’s start without further delay.

Table of content

This is what I have on my App.js file. Basically, The MainScreen is the landing screen that only contains some text.

The constant THEME_COLOR holds the main color that we want to apply to the Status Bar as a background color.

Background Color for IOS Device

We are going to use the SafeAreaView to change the background color of the status bar for the IOS device.

SafeAreaView only applicable to iOS devices with iOS version 11 or later.

Now if you test the above codes in the IOS simulator or real Device then its working fine with it. But as we know that the SafeAreaView is not working with Android devices, so we have to implement it in a different way.

You might also like

Background Color for Android Device

Let’s make a custom StatusBar to make it working with the Android device. Create a component with the name AppStatusBar.js and add the following code.

We have created a view with the same height and the background-color. The StatusBar.currentHeight will provide the StatusBar height of the current device. Later we have merged the backgroundColor property with the status bar style.

Finally, this is how we have implemented it to the App.js file.

We hope this article will help you to change status bar color to the React Native application. If you like this article then please follow us on Facebook and Twitter.

Источник

StatusBar

Component to control the app status bar.

Usage with Navigator​

It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

Imperative API​

For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overridden by the one set by the component in the next render.

Reference

Constants​

currentHeight (Android only) The height of the status bar.

Props​

animated ​

If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.

backgroundColor ​

The background color of the status bar.

barStyle ​

Sets the color of the status bar text.

On Android, this will only have an impact on API versions 23 and above.

hidden ​

If the status bar is hidden.

networkActivityIndicatorVisible ​

If the network activity indicator should be visible.

showHideTransition ​

The transition effect when showing and hiding the status bar using the hidden prop. Defaults to ‘fade’.

translucent ​

If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color.

Methods​

popStackEntry() ​

Get and remove the last StatusBar entry from the stack.

Parameters:

pushStackEntry() ​

Push a StatusBar entry onto the stack. The return value should be passed to popStackEntry when complete.

Parameters:

replaceStackEntry() ​

Replace an existing StatusBar stack entry with new props.

Parameters:

setBackgroundColor() ​

Set the background color for the status bar. Android-only

Parameters:

setBarStyle() ​

Set the status bar style

Parameters:

setHidden() ​

Show or hide the status bar

Parameters:

setNetworkActivityIndicatorVisible() ​

Control the visibility of the network activity indicator. iOS-only.

Parameters:

setTranslucent() ​

Control the translucency of the status bar. Android-only.

Источник

Вам также может понравиться

Как деактивировать режим наушников на смартфоне с Android?

Когда к мобильному устройству присоединены наушники

Обзор игры Джелли-Джу для Android

В последние годы популярность мобильных игр резко возросла

Лучшие шахматные приложения для iOS и Android

Нынешний читерский скандал в шахматном мире сейчас

Что хотят увидеть пользователи от Android 5.0 Key Lime Pie

ОС Google Android развивается, и по всему видимому