Full-width image with aspect ratio in React Native - image

Question

I want to require() a static image in a Home screen component I've written, and I want that image to be the full width of the display (which here happens to also be the full width of the container) while maintaining the aspect ratio.
Here is what I have so far. The Home component:
import React, { Component } from "react";
import {
StatusBar,
} from "react-native";
import Container from "../components/Container/Container";
import Header from "../components/Header/Header";
import FullWidthImage from "../components/Images/FullWidthImage";
export default class Home extends Component {
render() {
return (
<Container>
<FullWidthImage source={require("./lifting.jpg")}/>
<Header/>
<StatusBar translucent={false}/>
</Container>
);
}
}
And the FullWidthImage component:
import React, { Component } from "react";
import { View, Image, StyleSheet } from "react-native";
import Proptypes from "prop-types";
export default class FullWidthImage extends Component {
render() {
return (
<Image source={this.props.source} style={style.image} resizeMode="contain"/>
);
}
}
const style = StyleSheet.create({
image: {
flex: 1,
width: "100%",
borderColor: "red", borderWidth: 2,
}
});
I've been trying for a while and looking around on SO for a good answer but I can't find one (for an example some of them assume you have an uri and are not using require()). Greatly appreciate the help!

Answer 1

Here is what I ended up doing:
I created the following component
import React, { Component } from "react";
import { View, Image, StyleSheet, Dimensions } from "react-native";
import Proptypes from "prop-types";
export default class FullWidthImage extends Component {
static propTypes = {
requireSource: Proptypes.number // is actually a require(some-url)
};
render() {
let image = this.props.requireSource;
const { width, height } = Image.resolveAssetSource(image);
const ratio = height / width;
const SCREEN_WIDTH = Dimensions.get('window').width;
return (
<Image source={image} style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH*ratio}} resizeMode="contain"/>
);
}
}
And then I use it in my Home component like this:
This way I can have the image I want to show in a component in the same folder as that component.
Note: The formatting of this answer seems messed up, don't know how to fix it, I tried ctrl+k on the code snippets.

Answer 2

You can use the not so well documented library resolveAssetSource.
Like this:
import {
Platform,
StyleSheet,
Text,
Image,
View,
Dimensions,
} from 'react-native';
var resolveAssetSource = require('resolveAssetSource');
var imgSrc = resolveAssetSource(require('./200x150.png'));
console.log(imgSrc.width, imgSrc.height);
const SCREEN_WIDTH = Dimensions.get('window').width;
const IMAGE_RATIO = imgSrc.height/imgSrc.width;
...
<Image source={imgSrc}
style={{width:SCREEN_WIDTH, height:SCREEN_WIDTH*IMAGE_RATIO}}/>
...
The important being: var imgSrc = resolveAssetSource(require('./200x150.png'));
I used this issue to get the answer, and then I went and try it ; )
https://github.com/facebook/react-native/issues/4025

Answer 3

Use resizeMode (https://facebook.github.io/react-native/docs/image.html#style)
resizeMode: "cover"
In your code:
...
const style = StyleSheet.create({
image: {
flex: 1,
width: "100%",
borderColor: "red", borderWidth: 2,
resizeMode: "cover"
},
container: {flex:1}
});
Or try with other types: contain, cover, stretch, center, repeat.