Does react native support repeating-linear-gradient?

user_1138974 0
Viewed 1405

I am trying to have a repeating-linear-gradient for my view in React Native. However i couldn't find any information or library that would help me use it. I found a library named react-native-linear-gradient but it seems to be helpful to only have simple linear gradient. Thanks for your help in advance

CSS

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);
react-native
2 Answers

In React, styles are specified with an object wherein the key is the camelCase version of the style name, and the value is the style’s value. If the value is not explicitly typeof 'number', the entire value must be a single string. Within that string, normal css style names can be used.

Here is an example:

<ExampleComponent
  style={{
    background: 'repeating-linear-gradient(-55deg, #222, #222 10px,#333 10px, #333 20px)',
    backgroundSize: 'cover',
  }}
/>
user_139699590

I have used react-native-linear-gradient for my splash screen

fist I have set 4 different colors and make it a gradient with white color.

const gradient1 = [Colors.secondary1Color, Colors.white];
const gradient2 = [Colors.primary1Color, Colors.white];
const gradient3 = [Colors.secondaryColor, Colors.white];
const gradient4 = [Colors.primaryColor, Colors.white];

I first set this.state = {changeGradient: true}

then I have this changeGradient function which changes the const gradient colors ever had a second 

changeGradient = async () => {
        console.log("changeGradient", await this.state.gradient);
        if (this.state.changeGradient) {
            setTimeout(async () => {
                await this.setState(({ gradient }) => ({ gradient: gradient === gradient1 ? gradient2 : gradient === gradient2 ? gradient3 : gradient === gradient3 ? gradient4 : gradient1 }));
                this.changeGradient();
            }, 500);
        }
    };

Then, I render in the Lineargradient component

<LinearGradient colors={this.state.gradient} style={styles.container}>
</LinearGradient >

You're good to go!!! Hope this helps you!

user_106795240
Related