Cannot get background image to work with React-Native and NativeBase

Question

I am trying to use NativeBase with ReactNative and have a picture as the background. I've been googling for a while and here is the code I've come up with:

export default class WelcomeScreen extends Component {
    render(){
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                </Header>
                <Content>
                    <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
                    <Text>Do you ever feel like you dont have a partner</Text>
                </Content>
            </Container>
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

The problem is that this stretches the image a great deal so that it's unrecognizable in the simulator. Here's a picture of what's in the simulator compared to the actual image:

and here's the actual image:

How do I fix this?

https://facebook.github.io/react-native/docs/image.html resizeMode PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) probably you are looking for 'contain' — Burak Karasoy, Sep 27 '16 at 17:40
I am Sanket from NativeBase team. Let me re-create this at my end. I will keep you posted on this. — Sanket Sahu, Sep 27 '16 at 19:25

score 5 · Answer 1 · edited Aug 05 '17 at 04:27

I have two solutions for this:

The NativeBase Content component is a wrapper of React Native ScrollView. Image when used with ScrollView makes it necessary to include height and width of image.
If you want to exclude mentioning dimensions for image, use View in place of Content.

<View>
  <Image
     source={testImage}
     style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }}
  />
  <Text>Do you ever feel like you dont have a partner</Text>
</View>

Ashish · Answer 2 · 2016-09-27T19:02:13.697

You can change the HEIGHT and WIDTH of the image to get it into view port, for this you can use the Dimensions API of react-native. For more detail read this react-native doc for Dimensions API.

import { Text, View, Dimensions } from 'react-native';

export default class WelcomeScreen extends Component {
render(){
    let {height, width} = Dimensions.get('window');
    return (
        <Container>
            <Header>
                <Button transparent>
                    <Icon name='ios-arrow-back' />
                </Button>
            </Header>
            <Content>
                <Image source={require('../images/telula_upclose.jpeg')}  
                   style={[styles.backgroundImage, {height:height, width: width}]} />
                <Text>Do you ever feel like you dont have a partner</Text>
            </Content>
        </Container>
    );
  }
}

let styles = StyleSheet.create({
  backgroundImage: {
  flex: 1,
  backgroundColor:'transparent',
  justifyContent: 'center',
  alignItems: 'center',
 }
});

and if you want your text over the background image then wrap it within <Image> component.

<Image>
   <View>
     <Text>Hello!! </Text>
   </View>
</Image>

score 2 · Answer 3 · answered Dec 03 '16 at 14:06

Here is a component that does it:

import {
  Dimensions,
  Image,
} from 'react-native'
import React from 'react'

const BackgroundImage = (props) => {
  const window = Dimensions.get('window')
  const height = props.height || window.height
  const width = window.width
  const resizeMode = props.resizeMode || 'cover' // cover
  return (
    <Image
      style={[props.styles, {height: height - props.headerSize, width: null, resizeMode: resizeMode }]}
      opacity={1}
      source={props.uri ? {uri: props.uri} : props.source}
    >
      {props.children}
    </Image>
  )
}

export default BackgroundImage

score 1 · Answer 4 · answered Mar 28 '19 at 18:08

You can use flex: 1 styling on an <Image> element to have it fill the whole screen. You can then use one of the Image resize modes to have the image completely fill the element:

<Image style={style.backgroundImage} source={require('../../assets/images/bg.png')}  />

Component:

import React from 'react';
import { View, StyleSheet, Image } from 'react-native';

class ReactBGImg extends React.Component {
    render() {
        return (
            <Image style={style.backgroundImage} source={require('../../assets/images/bg.png')}  />
            <View style={style.backgroundTransperant}>
                <Text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tristique ligula, quis tristique justo. Cras dictum est libero, eget pretium nunc vestibulum sit amet.
                </Text>
            </View>
        )
    }
}

const style = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover',
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
    }
    backgroundTransperant: {
        backgroundColor: 'transparent'
    }
});

Hope it should helpful for you!

score 0 · Answer 5 · answered Sep 27 '16 at 17:04

You can use Dimension for get a size screen and resize a image:

1- import Dimension:

import { View, Text, Dimensions } from 'react-native'

2- in your component get hardware size in object window

const window = Dimensions.get('window');

3- added a dimention your Image

<Image
     style={{width: window.width, height: window.height}}
     source={require('../images/telula_upclose.jpeg')}
/>

Warning: Your image may be deform. Use 'resizeMode' props in your Image

You can look this for more information: documentation for Image and resizeMode

That seems very complicated for such basic functionality? I have to imagine there's a built-in way to do this? — Philip7899, Sep 27 '16 at 18:50

score 0 · Answer 6 · answered Feb 23 '19 at 16:46

0

Use the react-native ImageBackground component designed exactly for rendering background images

answered Feb 23 '19 at 16:46

Vyacheslav Cotruta

772
7
13

Cannot get background image to work with React-Native and NativeBase

6 Answers6