-1

I need to create component like

component

Here is part of my code

<ImageBackground source={{uri}} style={{width: 234, height: 165, marginTop: 10, borderRadius: 10}}>
  <Text style={{margin: 10, fontSize: 24, fontWeight: 'bold', color: 'white'}}>
      Test
  </Text>
  <Text style={{marginLeft: 7, marginTop: 80, color: 'white'}}>
    <Icons name="distance" size={25} style={{color: 'white'}}></Icons>
    <Text style={{color: 'white'}}>
      2 KM
    </Text>
    <Text>   </Text>
    <Icons name="star" size={25} style={{color: 'white'}}></Icons>
    <Text style={{color: 'white'}}>
      4.9
    </Text>
  </Text>
</ImageBackground>

Prop style borderRadius doesn't works with component ImageBackground. I tried to use various wrappers, but didn't get any results, also I tried to use Image component, but this component cannot contain other components (Text for ex.)

Ruli
  • 2,592
  • 12
  • 30
  • 40
Bogdan Dyachok
  • 33
  • 1
  • 1
  • 5
  • While images show what is needed, they can be removed by time and your question loses part of information possibly useful for future readers. The code should be placed as text (formatted as code), so it creates [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Images such as first are fine, describing what you need, visually, but never post code/errors as image. You (or other user) should replace the code snip by textual form. – Ruli Nov 04 '20 at 10:36

1 Answers1

1

Use this way

<ImageBackground
  style={{height: 100, width: 100}}
  imageStyle={{ borderRadius: 6}} < -- like this -->
  source={{ uri: 'www.imageislocatedhere.com }}
>
Nooruddin Lakhani
  • 7,507
  • 2
  • 19
  • 39