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/react-native/docs/statusbar.html#statusbar

I would like for an icon (or even just a small widthxheight square) to appear next to the networks bar continuously while the app is running in the background. I tried combining the View component with the status bar to create a small red rectangle like this:

      <View style={styles.container}>
        <StatusBar
          backgroundColor="blue"
          barStyle="light-content"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   width: 20,
   height: 20,
   backgroundColor: 'red'
  }
}) 

However the red square just appeared below the status bar. Any ideas?

Edit: What I want is to have my app logo on the status bar even when the app is in the background. (apps that provide VPN and location services do this sometimes).

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: