Jarsen Jarsen - 2 months ago 21
iOS Question

Full screen image in React Native

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

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.

iOS Simulator Screenshot

Comments