How to make StatusBar transparent?

Just use it like this: Tested with: "react-native": "0.60.4" and "0.61.5"

<StatusBar translucent backgroundColor="transparent" />

This is working for me on android

<StatusBar
   backgroundColor="transparent"
   translucent={true}
/>

Unless you are using Statusbar as a component, try this method.

useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle("dark-content");
      Platform.OS === 'android' && StatusBar.setBackgroundColor('transparent');
      StatusBar.setTranslucent(true);
    }, []),
  );

Do not forget to give some paddingTop to the most outer View.

<StatusBar translucent backgroundColor="transparent" /> is the way to go, thx to @Felipe Rugai

However, 2 things to know:

1. If you are using <Header /> component from react-native-elements, it already have <StatusBar /> included, using its statusBarProps instead.
2. If you are using WIX react-native-navigation, they have a separate way to dealing with the status bar, refer to this and this. They said it is incompatible with React Native's , however, looks like they work well together for me.
3. Also android native code/config discussed in another stackoverflow topic solution will override by <StatusBar /> hence doesn't work well.

If you're talking about the status bar of the OS (the one you pull down to access wifi/bluetooth/settings etc), try adding this to you MainActivity.java:

private void hideNavigationBar() {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}

And you can call that^ function in this function from the same MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    hideNavigationBar();
}

However, if you're talking about the StatusBar of the app, try adding this to your App.js file

static navigationOptions = {
    header: null
}

This solution can solve the issue if you're working with expo in your package JSON /expo configuration: you can add a property to overwrite the default StatusBar for android

"androidStatusBar":{
    "translucent":false
}

you can set it usingStatusBar.setBackgroundColor(Colors.TRANSPARENT);

Try this to make transparent statusbar in android

container: {
      flex:1,
      paddingTop: 20
    },

add display flex and paddingTop to your main View component

In react native, if you are using expo you can go to the app.json file and add status bar color. After this background color of the status bar for the complete app will change.

"androidStatusBar": {
  "backgroundColor": "#105846"
},

Check the linked page.