CODEWITHSUNDEEP
react-nativeflexbox
user3473788
user3473788

Reputation: 21

How to fit a React Native image into its container using flexbox?

Its a dumb question but I am having problem that I am trying to fit image into its container. The Image OverFlows in width:

flexbox image issue

Code : 

<View style = {styles.imageContainer}>
        <Image style={styles.img} source={require('./img_1.png')} />
        </View>

        <View style={styles.banner}>
        <ScrollView >
            <Text>Hellp Boy</Text>
            <Text>Hellp Boy</Text>
            <Text>Hellp Boy</Text>

        </ScrollView>
        </View>

and Styling Portion :

const styles = StyleSheet.create({

  imageContainer: {
    backgroundColor : '#DB7093',
    flex : 1,  
    padding :  10,
    borderColor : '#7FFF00',
    borderWidth : 10,
  },
  img : {
    flex : 1 ,
    resizeMode : 'stretch',
    overflow : 'visible',
  },
  banner:
  {
    flex : 2,
    padding :  10,
    borderColor : '#7FFF00',
    borderWidth : 10,
  },
});

Upvotes: 1

Views: 4343

Answers (3)

Hoang Trung
Hoang Trung

Reputation: 2017

Add flexDirection: 'row' to imageContainer

Upvotes: 2

Jared Goertzen
Jared Goertzen

Reputation: 92

try putting transform: [{ scale: 1.0 }], on your imageContainer

Upvotes: 0

G. Hamaide
G. Hamaide

Reputation: 7106

Try adding resizeMode='contain' as a prop to your image : 

<Image style={styles.img} source={require('./img_1.png')} resizeMode='contain' />

Upvotes: 0

Related Questions