Linear Gradient background color in React-Native

Question

In my application I need to dynamically change the background color. The changes comes from the child view to the parent view through callback. Currently it looks like this:

Child view:

onButton1Press() {
 this.props.callbackFromParent('#ff4c00');
}

Parent view:

myCallback = (dataFromChild) => {
 this.setState({ backgroundColor: dataFromChild }); 
}

It's working great, but the problem is that I need to implement a linear gradient background color.

I found a 'react-native-linear-gradient' library, that works well on other views, like buttons, but I cannot to set it to the background color.

Example:

    <LinearGradient colors={['#085d87', '#27c7bb']}
       start={{ x: 0, y: 1 }}
       end={{ x: 1, y: 0 }}>
        <Text style={styles.buttonText}>LinearGradient</Text>
    </LinearGradient>

It is possible to set the background color to gradient? Is there another approach to make it possible in react-native? Thanks.

Answer 1

If you want to put it in background, then you only need to wrap the <LinearGradient with your view that is background Example:

<View style={{flex:1}}>
   <LinearGradient color={[...]} style={{flex:1}}>
    ...//Your component
   </LinearGradient>
</View> 

Hope this helps!