transparent text on button with LinearGradient react antive

Viewed 25

I am making an app and I am using a button and I want this button to have a transparent color so it gets the color behind of it from a LinearGradient.

what I have is this:

<LinearGradient
        colors={["#411a50", "#bb265f"]}
        start={{ x: 0.1, y: 0.5 }}
        end={{ x: 0.65, y: 0.65 }}
        locations={[0.5, 0.5]}
        style={styles.box}
      >
        <Text style={styles.titleText}>OasysNOW</Text>
        <Text style={styles.bodyText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec
          tincidunt praesent semper feugiat nibh sed pulvinar proin. Suspendisse
          ultrices gravida dictum fusce. Quisque id diam vel quam. Consequat
          interdum varius sit amet mattis vulputate enim nulla. Tincidunt
          praesent semper feugiat nibh sed pulvina
        </Text>
        <TouchableOpacity style={styles.buttonStyle}>
          <Text style={[styles.buttonText, { color: "#411a50" }]}>
            LET'S GET <Text style={styles.buttonText}>STARTED</Text>
          </Text>
        </TouchableOpacity>
      </LinearGradient>

this becomes like this: enter image description here

and also:

container: {
     flex: 1,
        justifyContent: "center",
        alignItems: "center",
      },
      box: {
        width: "100%",
        height: "100%",
      },
      buttonStyle: {
        backgroundColor: "#fff",
        padding: 10,
        marginTop: 20,
        marginLeft: 95,
        marginRight: 95,
        justifyContent: "center",
        borderRadius: 10,
      },
      buttonText: {
        color: "#bb265f",
        textAlign: "center",
        fontSize: 20,
      },
      titleText: {
        fontSize: 20,
        fontWeight: "bold",
        textAlign: "center",
        color: "#fff",
      },
      bodyText: {
        color: "#fff",
        fontSize: 16,
        textAlign: "justify",
        paddingVertical: 20,
        paddingHorizontal: 20,
      },

I want to have the button to be like this:

enter image description here

so the text inside the button has the transparent color. how can I make this like that?[![enter image description here][3]][3]

1 Answers

One simple and possible solution in this case is to create a png image of LET'S GET STARTED with transparent text and use it as an image button.

Related