Search code examples
androidreact-nativegradientlinear-gradients

Android status bar gradient React Native


I would like to put a gradient in android status bar enter image description here

in ios looks beautiful

enter image description here

I'm using linear gradient with angle

const insets = useSafeAreaInsets();

<StatusBar barStyle="light-content" backgroundColor={colors.navbarBackgroundStart} />

        <LinearGradient
            style={{ paddingTop: insets.top }}
            colors={[colors.navbarBackgroundStart, colors.navbarBackgroundEnd]}
            useAngle
            angle={150}
            angleCenter={{ x: 0.8, y: 0.8 }}
        >

Solution

  • You should be able to the translucent prop for android https://reactnative.dev/docs/statusbar#translucent-android

    const insets = useSafeAreaInsets();
    
    <StatusBar barStyle="light-content" backgroundColor="transparent"  translucent />
    
    <LinearGradient
       style={{ paddingTop: insets.top }}
       colors={[colors.navbarBackgroundStart, colors.navbarBackgroundEnd]}
       useAngle
       angle={150}
       angleCenter={{ x: 0.8, y: 0.8 }}
       >