0

I have code that looks like this:

  <View style={styles.logoContainer}>
    <View style={styles.logoTextContainer}>
      <Text style={styles.logoText}>{siteName}</Text>
    </View>
    <View style={styles.logoImageContainer}>
      <Image source={logo} style={styles.logo} resizeMode="contain" />
    </View>
  </View>

With the relevant styles looking like this:

  logoContainer: {
    flex: 4,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'space-evenly',
      // borderWidth: 1,
      // borderColor: 'blue',
  },
  logoImageContainer: {
    flex: 3,
    justifyContent: 'center',
      // borderWidth: 1,
      // borderColor: 'red',
  },
  logo: {
    width: 250,
    height: 250,
  },

The issue is that the (square) image does not scale to fit inside the container (the commented out borders are so that I can make sure the containers are where I think they are, and the right size - they are).

I have seen various questions about this - some concern remote images, not the case here. Other suggestions:

  • Set resizeMode as a prop to the Image element.

  • Set resizeMode as a style.

  • Do either of the above with the width as 'undefined' in the style.

  • Do either of the above with the width as 'auto' in the style.

None have made any difference, the only thing that works is setting width and height specifically, as seen in the code above. This looks ok on the more recent (read: larger) iPhone sims, but causes the image to overlap with other stuff on the iPhone 5 sim.

To check if the resizeMode prop is having any effect, I set it to 'center' (with no width or height styles). This was a bit more promising, as the image is now only slightly wider than the screen. However, it is still much taller than the view, which contradicts the docs on resizeMode: center:

center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

Trying to add width=auto/undefined to resizeMode="center", causes the image not to display at all.

The logoImageContainer is a defined size (defined through flexbox), and I just want the image scaled and centred to fit in it.

Alex
  • 2,270
  • 3
  • 33
  • 65
  • use this "https://www.npmjs.com/package/react-native-fit-image" package – Muhammad Iqbal Jun 01 '19 at 01:46
  • Do you want to scale the view with respect to image or scale the image according to wrapping view size? If you want to do the latter, add `flex:1` to the image style, and resize the view with respect to device dimensions, using [Dimension](https://facebook.github.io/react-native/docs/dimensions#get) API. – Nishant Nair Jun 01 '19 at 05:41
  • @NishantNair With respect to the wrapping view style. Surely using the dimension api should be redundant? The logoContainer is a fixed size relative to the screen - flex 4, next to a different view with flex 5, wrapped in a ‘mainContainer’ that fills the screen, so logoContainer is already fixed at 4/9 times the height of the screen. LogoImageContainer is then a fixed proportion of that... Unless I’ve misunderstood flexbox, the size of everything is already fixed, so why do I need to use a separate definition (dimensions api)? – Alex Jun 01 '19 at 11:06
  • Try removing `justifyContent:center` style from the `logoImageContainer` style. Give `flex:1`, provide `width` of required size and add `aspectRatio:1` to `logo` style. – Nishant Nair Jun 01 '19 at 17:43

0 Answers0