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?

Solution 1

I have two solutions for this:

1. 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.

2. 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>

Solution 2

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>

Solution 3

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

Comments

[Philip7899]

That seems very complicated for such basic functionality? I have to imagine there's a built-in way to do this?