0

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 />
Shivam
  • 2,147
  • 1
  • 11
  • 28
CodingProfile
  • 159
  • 8

2 Answers2

2

You can give backgroundColor as #FF000080, and you can change color transparency by changing the last 2 digits of #FF000080

<StatusBar style="light" backgroundColor={"#FF000080"} translucent />
Shivam
  • 2,147
  • 1
  • 11
  • 28
  • If i set it like this the opacity looks different in the status bar than if i add same color on a container and set opacity : 0.8 to that container. The color on status bar color looks more transparent – CodingProfile Oct 12 '22 at 06:19
  • add snack for your code – Shivam Oct 12 '22 at 06:39
  • Then pass the same hex color to both the status bar and the container rather giving seperate opacity to it – Adnan sayed Oct 12 '22 at 06:46
1

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",
 },       
});
CodingProfile
  • 159
  • 8