0

I am trying to align image on top of its container in react native, especially on landscape.

<View style={{flexDirection: 'row', justifyContent: 'center',alignItems: 'center'}}>
    <View style={{flex:1,backgroundColor: 'green'}} >
      <Image resizeMode='contain'style={{ flex:1,width:"100%",height:"100%"}} source={{uri:"https://www.tageblatt.lu/wp-content/uploads/2020/09/250112_cx__cy__cw__ch_-1-739x493.jpeg"}}   />
    </View>
    <View style={{width:"15%",backgroundColor: 'blue' }}>
      <Text style={{color:"white",padding:7}}>{caption}</Text>
    </View>
</View>

The output of this code is :

enter image description here

And on landscape:

enter image description here

The desired output is:

enter image description here

Which I get on landscape orientation if I press control+s (saving) on my editor. I follow this question, but with no solution for me . I tried different values for resizeMode also .

Tarif Aljnidi
  • 288
  • 7
  • 16

1 Answers1

1

Have you tried to change the resizeMode ?

<Image resizeMode='cover' ... />
Poptocrack
  • 2,879
  • 1
  • 12
  • 28