Is it possible using gradient color for android status bar with react-native?

You can use translucent={true} and backgroundColor={'transparent'} properties with StatusBar and wrap them with react-native-linear-gradient like this:

 <LinearGradient colors={["#79e3fe","#635df8","#42385D"]}  style={{flex: 1}}>
    <StatusBar translucent={true} backgroundColor={'transparent'} />
  </LinearGradient >

You can tweak that.

In my case I use wix/react-native-navigation to navigate between screen in my application. So I use theses options for displaying my screens.

navigatorStyle: { navBarHidden: true, statusBarColor: 'transparent', drawUnderStatusBar: true },

An after you need to import react-native-linear-gradient to tweak your status bar. (create a component and add it to your pages)

<View>
    <LinearGradient colors={yourArrayOfColors} style={styles.header}/>

</View>

... //and in your style
header: {
        height: (Platform.OS === 'ios' ? 20 : StatusBar.currentHeight),
}

That could do the trick !

It works out for me with the following steps.

1. Add React Navigation as root component for React Native.

2. Create a custom header and make a gradient background for it. react-native-linear-gradient is needed of course. The following code demonstrates how to do it.

// @flow
import React from "react";
import { View, Platform, StatusBar } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header, StackViewTransitionConfigs } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

import MainScreen from "./MainScreen";

const GradientBackground = props => (
<LinearGradient
  colors={["#FFD801", "#FF8040"]}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  {...props}
/>
);

const AppNavigator = createStackNavigator(
{
  MainScreen: { screen: MainScreen }
},
{
  headerBackTitleVisible: false,
  initialRouteName: "MainScreen",
  defaultNavigationOptions: {
    header: props => {
      return (
        // When StatusBar is translucent, the StatusBar will be offset up by "StatusBar.currentHeight" points.
        // That's why the height of the Header is "Header.HEIGHT + StatusBar.currentHeight".
        <View style={{ height: Header.HEIGHT + StatusBar.currentHeight }}>
          <GradientBackground style={{ height: StatusBar.currentHeight }} />
          <Header {...props} />
        </View>
      );
    },
    headerTintColor: "#FFF",
    headerBackground: (
      <GradientBackground style={{ height: Header.HEIGHT }} />
    ),
    headerStyle: {
      backgroundColor: "transparent"
    }
  },
  headerLayoutPreset: "center"
}
);

const MainStack = createAppContainer(AppNavigator);

export default MainStack;

3. Add StatusBar to the root component and set StatusBar translucent.

// @flow
// @format
import React, { Component } from "react";
import { Button, TextInput, StyleSheet, StatusBar } from "react-native";
import { View, Text, FlatList } from "react-native";
import { NavigationScreenProp, NavigationState } from "react-navigation";

type Props = {
navigation: NavigationScreenProp<NavigationState>
};

/**
* 程序主页
* @export MainScreen
* @class MainScreen
* @extends {Component}
*/
export default class MainScreen extends Component<Props> {
static navigationOptions = {
  headerTitle: "MainScreen"
};

render() {
  const { navigation } = this.props;
  return (
    <View style={[styles.screenContainer]}>
      <StatusBar
        barStyle="light-content"
        translucent={true}
        backgroundColor="transparent"
      />
    </View>
  );
}
}

const styles = StyleSheet.create({
screenContainer: {
  flex: 1
}
});

4. Enjoy!

5. If the description above is not clear to you, feel free to download the ReactNavigationGradientStatusbar Project and check it out.

1.add react-native-linear-gradient to your project

2. use this code :

import {View , StyleSheet,StatusBar} from 'react-native'
import LinearGradient from 'react-native-linear-gradient';


    render(){
        const StatusBarHeight = StatusBar.currentHeight
        return(
            <View>
                <View style={{ height : StatusBarHeight , width : '100%' }}>
                    <LinearGradient 
                        start={{x: 0.0, y: 0.5}} 
                        end={{x: 0.5, y: 1.0}} 
                        locations={[0,0.3,0.6]}
                        colors={['#4c669f', '#3b5998', '#192f6a']} style={style.Container}>
                    </LinearGradient>
                </View>
                
            </View>
        )
    }

3. and this :

const style = StyleSheet.create({
    Container : {
        flex : 1,
        backgroundColor : '#2980b9',
        justifyContent : 'center',
        alignItems : 'center',
        flexDirection : 'row'
    }
})