What does width null signify in react-native?

Question

I was going through few questions on SO and few apps where I came across the following style configuration:-

  container: {
    flex:1,
    width: null,
  },

I was wondering what is the use of width:null here. Can someone please help?

Answer 1

<Image source={require('./images/MacWallPaper.jpg')} style={styles.container}>

</Image>

When you don't specify width: null and height: null component fetches actual width and height of the source image.

container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'rgba(0, 0, 0, 0)',
}

when you explicitly specify width: null and height: null component won't make use of actual width and height of the image.

container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'rgba(0, 0, 0, 0)',
   // remove width and height to override fixed static size
   width: null,
   height: null,
}

Watch this video