CODEWITHSUNDEEP
iosreact-native
Jarsen
Jarsen

Reputation: 7572

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?

Upvotes: 16

Views: 33576

Answers (2)

ayac3j
ayac3j

Reputation: 81

if support Android and iOS you can use this code , you need hide Toolbar and StatusBar

StatusBar hiden

return (
        <View style={styles.root_layout}>
            <StatusBar hidden={true} />
            ...
        </View>
    )

ToolBar hiden

static navigationOptions = {
    header: null
}

Upvotes: 3

Colin Ramsay
Colin Ramsay

Reputation: 16466

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

Upvotes: 36

Related Questions