Search code examples
reactjsreact-nativereact-propsstatusbar

React Native status bar semi transparent

Is it possible to make StatusBar semi-transparent with an opacity of 0.8? if I pass backgroundColor={"transparent"} like in the docs it becomes fully transparent without color. Docs https://reactnative.dev/docs/statusbar

<StatusBar style="light" backgroundColor={"red"} translucent />
Solution

  • This is how i did it. Under StatusBar added a View with height: insets.top and style for StatusBar. This works for both OS platforms.

    return (
<View>
<StatusBar style="light" translucent />
<View style={[styles.statusBar, { height: insets.top }]}></View>
<View
    style={[
    styles.contentContainer,
    {
       paddingLeft: insets.left,
       paddingRight: insets.right,
    },
 ]} >

</View>
</View>
);
}
 const styles = StyleSheet.create({
 statusBar: {
 opacity: 0.8,
 backgroundColor: "red",
 },       
});