React-Native Image Opacity giving opacity to text - react-native

Question

Im using an image as basically a view and putting text inside of it, i tried to give opacity to the image but everytime i try the text gets opacity too I don't really know why it happens
<View style={{flex: 1}}>
<View style={{height: 180,}}>
<Image source={{uri : this.state.fullURLImage}} style={{flex: 1,width: window.width,justifyContent:'center',alignItems:'center',opacity: 0.7}}>
<Text style={{textAlign: 'center',fontWeight: 'bold',color:'white',fontSize:16,}}>{this.state.title}</Text>
<Text style={{color:'white',fontSize:14,}}>{'\n'}July {this._try(this.state.day)} | {this.state.time_start} - {this.state.time_end}</Text>
</Image>
</View>
<View style={{flexGrow: 1, backgroundColor: 'white',}}>
<Text style={{textAlign:'center',color:'#1B3D6C',fontWeight:'bold',margin:10,marginTop: 40}}>{this.state.author}</Text>
<Text style={{margin:10,textAlign: (Platform.OS === 'ios') ? 'justify' : 'left'}}>{this.state.text}</Text>
</View>
<Image
source={{uri : this.state.fullURLAuthor}}
style={{
position: 'absolute',
top: 180 - 64 / 2,
height: 64,
width: 64,
left: (Dimensions.get('window').width - 64) / 2,
borderRadius: 32,
}}
/>
</View>

Answer 1

You need to put Text outside of image tag and give them position
OR
Also give opacity using like {backgroundColor: 'rgba(0,0,0,0.5)'}}

Answer 2

You can just use <ImageBackground> instead of <Image> and apply opacity and color as mentioned below.
<ImageBackground
style={{flex: 1,height: 110,resizeMode: 'cover',}}
source={imageSoure}
borderRadius={5}
resizeMode='cover'
imageStyle={{ opacity: 0.3,backgroundColor: 'YourFavouredColor'}}
>
<Text>
{someText}
</Text>
<Text>
{someOtherText}
</Text>
</ImageBackground>

Answer 3

As #Nisarg already mentioned, it's nice to position the text from outside of the image. And meanwhile here is the code for changing opacity for the background:
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200,
opacity:0.1
}}
source={require("#expo/snack-static/react-native-logo.png")}
/>

Answer 4

React draws components in order of appearence.
That said, I think your Image is being drawn on top of Text.
You have more than one way to achieve your layout, but following your code try this:
<View style={{flex: 1}}>
<Image
source={{uri : this.state.fullURLAuthor}}
style={{
position: 'absolute',
top: 180 - 64 / 2,
height: 64,
width: 64,
left: (Dimensions.get('window').width - 64) / 2,
borderRadius: 32,
}}
/>
<View style={{height: 180,}}>
<Image source={{uri : this.state.fullURLImage}} style={{flex: 1,width: window.width,justifyContent:'center',alignItems:'center',opacity: 0.7}}>
<Text style={{textAlign: 'center',fontWeight: 'bold',color:'white',fontSize:16,}}>{this.state.title}</Text>
<Text style={{color:'white',fontSize:14,}}>{'\n'}July {this._try(this.state.day)} | {this.state.time_start} - {this.state.time_end}</Text>
</Image>
</View>
<View style={{flexGrow: 1, backgroundColor: 'white',}}>
<Text style={{textAlign:'center',color:'#1B3D6C',fontWeight:'bold',margin:10,marginTop: 40}}>{this.state.author}</Text>
<Text style={{margin:10,textAlign: (Platform.OS === 'ios') ? 'justify' : 'left'}}>{this.state.text}</Text>
</View>
</View>