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?

Answer 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>