How to add icon (image, logo..) to the status bar

Question

I have noticed that there is no props for the StatusBar component (React Native) to include an icon or logo of any kind as in this documentation: https://facebook.github.io/rea

Answer 1

For iOS it's not possible to add any custom icons in the status bar, apple doesn't allow it.

For Android you should use Notification and Notification Manager. Just write a native module in java who do this when your app is launching. React Native allow you to call Native Module written in Java, take a look here https://facebook.github.io/react-native/docs/native-modules-android.html

You should also read this for Notification How to show an icon in the status bar when application is running, including in the background?

Answer 2

There are 2 kinds of icons in Android status bar.

One kind is system icons that come from framework-res.apk and extracted to the /system/framework , you can't change those without having some elevated privileges on the device and mounting the system image read/write.

The other kind is the notification icons as mentioned here before. For iOS you can't really change much.

Your screenshot shows both kinds and you want to put your icon next to the Network bars icon but those are system icons (on Android)

Here is a plugin that deals with notifications (and notification icons) both platforms and wraps everything, easy to use with react You can find a sample native code for iOS notification here and Android here:

Answer 3

You can't change the status bar. Apple only allows you to change the appearance of the status bar. For the ios app maybe changing the appearance globally works for you.

Open the .xcproj file generated by ReactNative and:

1. In your Info.plist you need to set "View controller-based status bar appearance" to a boolean value.
2. set it to NO set the style in AppDelegate adding this code on the didFinishLaunchingWithOptions function: UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)