17

I'd like to use a background image in my react native app, the image is smaller than the screen, so I have to stretch it.

but it doesn't work if the image is loaded from asset bundle

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    resizeMode: 'stretch',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

<Image source={require('image!background')} style={styles.bgImage}>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</Image>

it looks like this:

enter image description here

however, it works fine for a remote image, through source={{uri: 'background-image-uri'}}:

enter image description here

xinthink
  • 1,460
  • 1
  • 18
  • 22
  • Try `resizeMode: 'cover'` ? refer to: [http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native](http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native) – ddaaggeett Jan 16 '17 at 05:33

4 Answers4

27

From Github issue: Image {require} is broken in React Native for Resizing, you could try <Image style={{width: null, height: null}}, hope that facebook would fix it soon.

Dickeylth
  • 828
  • 9
  • 15
  • 4
    setting the width and height worked for me...background : { flex:1, width: null, height: null, resizeMode:'stretch' }, – pkbyron May 03 '16 at 15:30
  • This didn't work for me, but it helped me to realize that resizeMode is actually a prop, I was treating it as a css property. – Cyrois Oct 08 '19 at 06:34
11

The Image tag should generally not be treated as a container view.

Having an absolutely positioned wrapper containing your (stretched/contained) image appears to work well:

var styles = StyleSheet.create({
    bgImageWrapper: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0
    },
    bgImage: {
        flex: 1,
        resizeMode: "stretch"
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    }
});



<View style={{ flex: 1 }}>
  <View style={styles.bgImageWrapper}>
    <Image source={require('image!background')} style={styles.bgImage} />
  </View>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</View>
Jack
  • 662
  • 5
  • 14
  • 5
    Unfortunately, it doesn't work for me. And why `Image` should not be treated as a container, while the offical document suggests [Background Image via Nesting](https://facebook.github.io/react-native/docs/image.html#background-image-via-nesting)? – xinthink May 18 '15 at 08:45
  • 1
    You can now use ImageBackground as a container view: https://medium.com/@hklucher/how-to-use-an-imagebackground-in-react-native-515ee06a6b1f – Magne Aug 30 '18 at 14:44
3

You could always use the Dimensions module to get the width of the screen and set your image's width style to that value:

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

It also seems strange that a remote image works fine...you can try loading up a local static image with the uri syntax by using source={{uri: 'local_image_file_name' isStatic: true}}.

Dave Sibiski
  • 1,710
  • 1
  • 15
  • 17
  • 1
    Thanks @dave, I think the [offical document](https://facebook.github.io/react-native/docs/image.html#why-not-automatically-size-everything) explains it, `require('image!x')` results in an object with fixed width & height (size of the image): `{"__packager_asset":true,"isStatic":true,"path":"...","uri":"logo","width":591,"height":573}`. I'll try the `uri` form and let you know the result, thx! – xinthink May 28 '15 at 12:46
3

for me use undefined instead of null value. on typescript environment, it will be prompted not assignable

 bgImage: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'stretch',

},

barungerti441
  • 113
  • 1
  • 2
  • 5