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>
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:
so the text inside the button has the transparent color. how can I make this like that?[![enter image description here][3]][3]

