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...