javascript – React native ImageBackground with LinearGradiant over impact

import React from "react";
import { Picture, ImageBackground, View } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import MaskedView from "@react-native-community/masked-view";

const Instance = () => {
  return (
    <View
      model={{
        width: 300,
        peak: 325,
        marginTop: 20,
        marginLeft: 10,
        marginRight: 3,
        marginBottom: 20,
        justifyContent: "middle",
        alignItems: "middle",
        shadowColor: "#222",
        shadowOpacity: 0.25,
        shadowOffset: {
          width: 0,
          peak: 8,
        },
        shadowRadius: 8,
      }}
    >
      <LinearGradient
        model={{
          width: "100%",
          peak: 300,
          borderRadius: 40,
        }}
        colours={["#10B2C8", "#07E1FF"]}
      >
        <View
          model={{
            flexDirection: "column",
            width: "80%",
            alignItems: "flex-start",
            marginLeft: 10,
          }}
        >
          <View
            model={{
              place: "absolute",
              backside: -250,
              proper: -90,
              shadowColor: "rgba(0,0,0,0.4)",
              shadowOffset: { width: 0, peak: 4 },
              shadowOpacity: 0.8,
              shadowRadius: 2,
            }}
          >
            <Picture
              model={{
                width: 125,
                peak: 125,
                rework: [{ rotate: "20deg" }],
                borderRadius: 15,
              }}
              supply={require("../../../property/eventCard/background/elevate-nYgy58eb9aw-unsplash-scaled.jpg")}
            />
          </View>
        </View>
      </LinearGradient>
    </View>
  );
};

export default Instance;