Jarsen Jarsen - 9 months ago 86
iOS Question

Full screen image in React Native

How do you make an

fill the entire
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
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?


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

'use strict';

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

var {
} = 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/'}} />

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.

iOS Simulator Screenshot