Full width image using flexbox?

[joshbedo]

I'm attempting to make an image full-width and came across a few stackoverflow questions related where the top upvoted answer was to use flexbox similarly to how i'm using it below. Although it doesn't seem to display the image unless i set static widths on my styles property. Any ideas?

var styles = StyleSheet.create({
 canvasContainer: {
 flex:1,
 alignItems: 'stretch'
 },
 canvas: {
 flex:1
 // width: 200,
 // height: 200
 }
});

render: function() {
 return (
 <View style={styles.container}>
 <View style={styles.canvasContainer}>
 <Image
 source={{uri: 'http://imgs.steps.dragoart.com/how-to-draw-a-pony-step-7_1_000000053055_5.jpg'}}
 style={styles.canvas} />
 </View>
 <ScrollView
 style={styles.scrollView}
 scrollEventThrottle={200}
 contentInset={{top: 0}}
 >
 {this.state.messages.map(m => {
 return <Text style={styles.message}>Josh: {m}</Text>
 })}
 </ScrollView>
 </View>
 )
 }

[brentvatne]

canvas: {
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0,
},

<Image
 resizeMode="contain"
 source={{uri: 'http://imgs.steps.dragoart.com/how-to-draw-a-pony-step-7_1_000000053055_5.jpg'}}
 style={styles.canvas} />

Try out stretch and cover for alternative resizeModes too

[brentvatne]

Here's a full example that integrates it using position: relative in the parent to constrain it:

var React = require('react-native');
var {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 Image,
} = React;

var SampleApp = React.createClass({
 render: function() {
 return (
 <View style={{flex: 1, flexDirection: 'row'}}>
 <View style={styles.container}>
 <Image
 resizeMode="contain"
 source={{uri: 'http://imgs.steps.dragoart.com/how-to-draw-a-pony-step-7_1_000000053055_5.jpg'}}
 style={styles.canvas} />
 </View>
 <View style={styles.container}>
 <Text>Hello!</Text>
 </View>
 </View>

 );
 }
});

var styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 position: 'relative'
 },
 canvas: {
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0,
 },
});


AppRegistry.registerComponent('SampleApp', () => SampleApp);

[brentvatne]

If this doesn't resolve your problem feel free to re-open.

[joshbedo]

@brentvatne awesome, i actually solved it by changing the container styles around. alignItems:'center' was causing the child image element to not show for some reason.

[miracle2k]

I can confirm the alignItems fix as well. In general, I find it very fiddly to figure out how combination of properties works, and the results are different depending on whether the source is local or not.

I believe that #2804 (comment) might be related to this also.

[onchainguy-btc]

Seems like you guys were struggeling with the same thing as me. I have an image not showing up though my code pretty much seems to be equal to @joshbedo's first post (see code below). As soon as I add a fixed height like for instance 300 to my imageWrapper style the image shows up. Does anybody have an idea?

import React, { Component, Image, PropTypes, View } from 'react-native'
import Dimensions from 'Dimensions'

let window = Dimensions.get('window')

const prefix = 'http://my-image-server.com/images/'

class MyImage extends Component {
 render() {
 let imageUrl = prefix + this.props.type + '/' + (this.props.size || 1080) + '/' + this.props.filename + '.jpg'

 return (
 <View style={styles.imageWrapper}>
 <Image style={styles.image} source={{uri: imageUrl}}/>
 </View>
 )
 }
}

MyImage.propTypes = {
 type: PropTypes.string.isRequired,
 filename: PropTypes.string.isRequired,
 size: PropTypes.string
}

let styles = {
 imageWrapper: {
 flex: 1,
 alignItems: 'stretch'
 },
 image: {
 flex: 1
 }
}

export default MyImage

[yashvekaria]

I have done according to this, Hope this code snippet might help you.

<Image style={styles.bgContainer} resizeMode='cover' source={require('./img/bg.png')} />

const styles = StyleSheet.create({ bgContainer: { flex:1, width: null, height: null } });

[tisalph]

Above @yashvekaria solution worked for me

[clinyong]

I have done without flex.

local image

<View>
 <Image
 style={{height: 100, width: null}}
 source={require('./ad.png')}
 />
</View>

network image

<View>
 <Image
 style={{height: 100}}
 source={{uri: 'http://xxx.com/ad.png'}}
 />
</View>

[mtolly]

@yashvekaria's and @clinyong's solution (adding a width: null) worked for me, and I am very curious as to why. Why is setting it to null different from not setting it at all?

[vinpac]

@clinyong How would you do width: 100%, height: auto in react-native?

[PierBover]

@vini175pa you can use react-native-extended-stylesheet for that, but the problem is that when the devices rotates the values are not updated...