0

I need to show a text and icon above the image. But here the image view and text and loading icon need not to be linked. Both need to have a separate view.

I have set two views (one view for image and another one for and add the marginTop:-300 values in my view. It is a wrong behavior.

    <View style={{ aspectRatio: 4 / 5, alignSelf: 'center', width: '100%', paddingLeft: '5%', paddingRight: '5%', opacity: 0.4,}}> 
      <FastImage resizeMode={FastImage.resizeMode.cover} style={{width: '100%',height: '100%',marginTop:18}} source={["imageUrl"]}/> 
    </View>

    <View style={{flex:1, alignSelf: 'center', alignItems: 'center', justifyContent: 'center',  marginTop:-50}}> 
      <ActivityIndicator size={"large"} color={"#ffffff"} style ={{marginTop:-700,}}/> 
      <Text style={{ fontSize: 15, fontFamily: "OpenSans-Semibold",marginTop:-300,color:'white'}}>Image captured</Text>
    </View>

https://i.stack.imgur.com/MF5kM.png

sejn
  • 2,040
  • 6
  • 28
  • 82

1 Answers1

1

You can use Position

Example This is an example of an image link I've created. 

import React, { Component } from 'react';
import { View, Image,ActivityIndicator, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
      <View style={{opacity:0.5}}>
        <Image
          style={{width: 50, height: 50 }}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={{width: 50, height: 50, }}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
        </View>
          <ActivityIndicator size={"large"} color={"red"} style={{position:"absolute"}}/> 
         <Text style={{position:"absolute",color:"red",bottom:"45%"}} > Loading </Text>
      </View>

    );
  }
}
hong developer
  • 13,291
  • 4
  • 38
  • 68
  • Here I need to add text and need to show a grey color above the image. I have added the opacity to blur and need to add the text above without opacity. Refer my example. Here need to show the text above the image https://snack.expo.io/@niph/position-exmaple – sejn Aug 10 '19 at 08:36
  • @sejn If opaque values are required, cover them with a view. Look at my updated answer code. – hong developer Aug 10 '19 at 08:53
  • It's working. But the loading text and icon are in the same line. So it gets overlapped. I need to show the text a little bit below the icon. Thanks for your reply – sejn Aug 10 '19 at 08:58
  • Thanks, it worked for me. I have accepted as your wish. I have another question. Is there is an option to change the image opacity color or any other way to do the change the image overlay to grey? – sejn Aug 10 '19 at 09:12
  • @sejn You can use `rgba` Example: `backgroundColor:'rgba(255,0,0,0.5)'` – hong developer Aug 10 '19 at 09:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197758/discussion-between-sejn-and-hong-develop). – sejn Aug 10 '19 at 09:21