Statusbar react native iphone

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/

Источник

How to prevent layout from overlapping with iOS status bar

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don’ think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

Below shows the screenshots before and after the padding is added.

9 Answers 9

Now you can use SafeAreaView which is included in React Navigation:

There is a very simple way to fix this. Make a component.

You can create a StatusBar component and call it first after the first view wrapper in your parent components.

Here is the code for the one I use:

After doing this and exporting it to your main component, call it like this:

I tried a more simple way for this.

We can get the height of Status Bar on android and use SafeAreaView along with it to make the code work on both platforms.

If we log out Platform.OS and StatusBar.currentHeight we get the logs,

Height on: android 24 and Height on: android 24

We can now optionally add margin/padding to our container view using

The final code in App.js is below:

@philipheinser solution does work indeed.

However, I would expect that React Native’s StatusBar component will handle that for us.

It doesn’t, unfortunately, but we can abstract that away quite easily by creating our own component around it:

The react-navigation docs have a great solution for this. First off, they recommend not to use the SafeAreaView included with React Native because:

While React Native exports a SafeAreaView component, it has some inherent issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. In addition, this component only supports iOS 10+ with no support for older iOS versions or Android. We recommend to use the react-native-safe-area-context library to handle safe areas in a more reliable way.

Instead, they recommend react-native-safe-area-context — with which it would look like this:

I would like to note that it’s probably a better idea to use the SafeAreaView that this library offers though, since phones these days may also have elements at the bottom that can overlap UI elements. It all depends on your app of course. (For more detail on that, see the react-navigation docs I linked to in the beginning.)

Источник

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.

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 a 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.

Источник

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

10 самых популярных гаджетов Apple в истории

Во введении стоит отметить, что компания Apple уже

Путешествие в будущее: как гаджеты Apple меняют нашу жизнь

Введение Технологии развиваются с невероятной скоростью

5 главных причин перейти на гаджеты Apple: обзор и сравнение

Введение: Apple является одной из самых известных и

Секреты кастомизации гаджетов Apple: советы и хитрости

Кастомизация гаджетов Apple – это процесс изменения