React Native - Fit image to screen - image

Question

I just want to fit an image of any size to the phone screen, so it just stays there as a background. I have the same issue with a logo I'm trying to put in the footer, I can't get it to fit in the it's view container.
I've tried many solutions I found in similar questions, using resizeMode and many width/height values, but nothing seems to work. My image is always displayed the same way.
Code for the image component:
import React from 'react';
import { View, Image } from 'react-native';
const Workspace = (props) => {
return (
<View
style = {styles.workspaceStyle}>
<Image
source={props.img}
resizeMode = 'contain'/>
{props.children}
</View>
);
};
const styles = {
workspaceStyle: {
flex: 1
}
}
export default Workspace;
My app.js render and style code:
render() {
return (
<View style = {{flex: 1}}>
<Workspace
img={require('./images/quarto.png')}/>
<ScrollView>
<Header>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
</Header>
</ScrollView>
<ScrollView style = {{flexDirection: 'row'}}>
{this.sideMenuShow()}
</ScrollView>
<Footer>
<View style = {styles.logoContainerStyle}>
<Image
style = {styles.logoStyle}
source = {require('./images/magicalStage.png')}
resizeMethod = "scale"
/>
</View>
<Text style = {{color: 'white', marginTop: 5, marginBottom: 2}}>teste, teste, teste, teste</Text>
</Footer>
</View>
);
}
}
const styles = {
logoContainerStyle: {
marginRight: 5,
marginLeft: 5,
marginTop: 2,
marginBottom: 3,
width: "20%"
},
logoStyle: {
paddingLeft: 2,
paddingRight: 2
}
}
Thanks in advance!
EDIT:

Answer 1

In app.js, your outer view need to use width and height of the screen:
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
Next, in Workspace: use stretch instead of contain ( same for your footer, add resizeMode )
resizeMode: 'stretch',

Answer 2

I do mine like this:
BackgroundImageStyle.js
import { StyleSheet } from 'react-native'
export default StyleSheet.create({
container: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
},
image: {
flex: 1,
resizeMode: 'cover',
}
})
BacgroundImage.js
import React, { Component } from 'react'
import { View, Image } from 'react-native'
import styles from './BackgroundImageStyle'
export default class BackgroundImage extends Component {
render() {
return (
<View style={styles.container} >
<Image
style={styles.image}
source={this.props.source}
/>
</View>
)
}
}
then you can use it like
<BackgroundImage source={your_image}/>
I hope everything is clear, the trick is to set position absolute and then top, left, bottom, and right to 0

Answer 3

You can use the ImageBackground component from react-native
https://facebook.github.io/react-native/docs/imagebackground
return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
);