React Native - Fit image to screen

4
votes

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:

Original picture

This is what the app is looking like

3
imagereact-native

3 Answers

8
votes

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',
2
votes

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

2
votes

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>
);