CODEWITHSUNDEEP
reactjsreact-native
youhan26
youhan26

Reputation: 123

react-native: image not show when not set width or height

rn version : 0.38

just specify the image style using flex, no width and height, but Image will not show on mobile screen. How to do this.

<View style={styles.container}>
    <Image style={styles.image} source={{uri : 'https://www.baidu.com/img/bd_logo1.png'}}>
    </Image>
</View>



const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  image: {
     flex: 1,
    resizeMode: 'contain'
  },
});

Upvotes: 9

Views: 6269

Answers (2)

Bertrand Martel
Bertrand Martel

Reputation: 45352

You can use flexGrow: 1 or flex: 1 on your Image without specifying the size, but you will need to set the container width and height either using percentage or a fixed size:

<View style={{ width: "100%", height: "100%" }}>
  <Image
    source={{
      uri: "https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png",
    }}
    style={{ flex: 1 }}
    resizeMode="contain"
  />
</View>

checkout this snack example

Upvotes: 1

BradByte
BradByte

Reputation: 11093

Network images require you to set height/width style props.

React Native Documentation.

Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image.

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

Upvotes: 7

Related Questions