Search code examples
reactjsreact-nativebackground-imagelinear-gradientscss-gradients

Is it possible to use image background "linear-gradient(to left, green 70%,red 30%)" to react native app?

I able to made it by html,css,jquery

here is my html code :

  ` var total_time_in_sec = 10
    var also_have_in_sec = 9;
    setInterval(() => {
        if (also_have_in_sec > 1) {
            var green_percent = Math.round(also_have_in_sec / total_time_in_sec * 100);

            if ((100 - green_percent) <= 50) {
                var color1 = "green " + green_percent + "%";
                var color2 = "red " + (100 - green_percent) + "%";
                var str = "linear-gradient(to left," + color1 + "," + color2 + ")";
            } else {
                var color1 = "red " + (100 - green_percent) + "%";
                var color2 = "green " + green_percent + "%";
                var str = "linear-gradient(to right," + color1 + "," + color2 + ")";
            }
            $("img").css("background", str);
            also_have_in_sec = also_have_in_sec - 1;
        } else {
            clearInterval();
            $("img").css("background", "red");
        }
        console.log(green_percent);
    }, 1000);`

Output is given below: enter image description here

Now I want to use an image with this kinds of background in react-native app.percentage available from backend. setTimeout and clearInterval is not mandatory.

Solution

  • You can not apply linear gradient style as you described to the react native apps.

    However, in order to display linear gradient in react native apps, this library might be useful.