CODEWITHSUNDEEP
react-native
Tarif Aljnidi
Tarif Aljnidi

Reputation: 318

Image doesn't align on top of its container React Native

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 .

Upvotes: 0

Views: 185

Answers (1)

Poptocrack
Poptocrack

Reputation: 3009

Have you tried to change the resizeMode ?

<Image resizeMode='cover' ... />

Upvotes: 1

Related Questions