4

When I have a background image:

<Image style={{flex: 1, width: null, height: null, resizeMode: 'cover'}} source={require('../images/background.png')}>
    <!-- Children -->
</Image>

I am expecting my image to cover the entire screen while keeping the image's aspect ratio. (See this SO question why I'm using width: null, height: null.)

However, if the image width is far smaller than the height, the image is centered which crops the top.

Question: How do I make the image start from the top instead, much like background-position: 50% 0 would in the web?

Community
  • 1
  • 1
logicalicy
  • 857
  • 1
  • 9
  • 19

1 Answers1

1

Hey:) Try increase height of your parent container ie.:

styles:

export default StyleSheet.create({
  image: {
    flex: 1,
    height: null,
    width: null,
  },
  imageContainer: {
    bottom: 0,
    flex: 1,
    height: '130%',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    width: '100%',
  },
})

component: 

<View style={styles.imageContainer}>
        <Image
          resizeMode="cover"
          source={require('src/assets/images/background.jpg')}
          style={styles.image}
        />
      </View>

Using this solution you can a little manoeuvre your image.

Darex1991
  • 855
  • 1
  • 10
  • 24
  • Although Image is now deprecated for ImageBackground this can be updated into a good working example of how to reposition your background. – Anthony Hughes Jun 29 '19 at 07:21