Question 34333 in React native Question posted in
The official React Native documentation can be found here.

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 />
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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",
 },       
});

  2. 0

    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 />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search