skip to Main Content

This is a link for what i really want

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.photoshopessentials.com%2Fphoto-effects%2Fplace-text-behind-object-photoshop%2F&psig=AOvVaw1hDtDiS8z1fcdcHG0YSX3e&ust=1585469975211000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKCzh4nevOgCFQAAAAAdAAAAABAD

Guys i want to add a text behind the image(.png) in react native ? There is ImageBackground. I simply need ImageForeground.

renderContactsItem = ({ item}) => {
return (
  <View style={styles.container}>
    <TouchableOpacity style={styles.itemContainer}
    onPress={() => this.props.navigation.navigate('Modal',{selectedItem:item},)}
    >
      <View style={[styles.card,{backgroundColor:item.color}]}>
        <Image
          style={styles.avatar}
          source={ item.picture }
        />
      </View>
    </TouchableOpacity>
  </View> 
)

};

2

Answers


  1. You should use ImageBackground instead of Image

    <View style={styles.container}>
     <ImageBackground source={image} style={styles.image}>
       <Text style={styles.text}>Inside</Text>
     </ImageBackground>
    </View>
    

    Please go through the official document – Here

    Login or Signup to reply.
  2. <View>
      <Text style={{ position: 'absolute', fontSize: 50 }}>
           Your Text to display
      </Text>
      <Image style={{ position: 'absolute' }} source={require('../yourImagePath')} />
    </View>
    

    You need to style your things around this. I hope this works for you and just style the components according to your requirements in case if you need something more.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search