React Native ImageBackground Orientation Change

You need to use resize for resizeMethod in order for the image to get actual resize:


The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to auto.

  • auto: Use heuristics to pick between resize and scale.

  • resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.

  • scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.

It's obvious that RN picks scale in your case, thus you have to explicitly set it to resize for it to work when the orientation changes and flex style change kicks in:

return (
    style={{ flex: 1, backgroundColor: 'blue' }}
      // All props other than children, style, imageStyle, imageRef,
      // will be passed to the inner Image component,
      // so, we can use resizeMethod that will be passed to the Image component


        flex: 1,
        borderWidth: 1,
        borderColor: 'red'
        resizeMode: 'repeat',
        <Text style={{
          backgroundColor: 'white'
        }}>.... Other code here....</Text>
      <View style={{
        position: 'absolute',
        right: 0,
        bottom: 0
        <Text style={{
          backgroundColor: 'white'
        }}>Absolute bottom-right text</Text>

Result screen capture:

Screen capture

Tested with Environment:

"react": "16.13.1",
"react-native": "0.63.2",

Sample tile image used for repeat background (400 X 400 pixels):

Background tile repeat image

Expo Snack:

RN ImageBackground Orientation Change