Full screen image in React Native

Question

How do you make an <Image> fill the entire UIWindow sized area in React Native? If I were using Autolayout I would set a constraint on each edge, but flux is very different paradigm and I'm not a web guy. Without setting a manual width/height on my <Image> nothing shows up, but how do I dynamically tell the style to be the same as the width and heigh of its parent element, or at the very least the window?

Answer 1

You need to use flexbox. Here's a full example:

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Image
} = React;

var TestCmp = React.createClass({
  render: function() {
    return (
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: 'http://lorempixel.com/200/400/sports/5/'}} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: 'stretch'
  },
  image: {
    flex: 1
  }
});

AppRegistry.registerComponent('RCTTest', () => TestCmp);

Notice that you need a container to allow you to define the flex of items within it. The key here is alignItems: 'stretch' to make the contents of imageContainer fill the available space.