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

Viewed 6089

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).these are the common icons we see on our status bar but I want to make my own and place it there, say for ex a red circle or any image for that matter..

3 Answers
Related