ImageBackground React Native doesn't show itself unless I give it the height even though the im-CodePudding

I am learning React Native and I am having trouble displaying the ImageBackground component. The ImageBackground has source that points to an image in the same folder, despite this is still not visible unless I give the ImageBackground a height in number, because if I try to give it a height in % it still won't show itself. Here is the code for the component execpt the style:

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

export default function WelcomeScreen(props) {
  return (
    <View>
      <Text>Welcome</Text>
      <ImageBackground source={require('./background.jpg')} style={styles.background} />
    </View>
  );
}

Trying different ways to style it, the ImageBackground has different behaviors regarding showing itself:

This will not show ImageBackground:

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
});

This won't either:

const styles = StyleSheet.create({
  background: {
    flex: 1,
    height: '100%',
  },
});

This will show it:

const styles = StyleSheet.create({
  background: {
    flex: 1,
    height: 300,
  },
});

I do not understand why this happens. From my understanding the size should be added only when the image is from the net, and regardless this, the % value should still work. What am I missing here?

EDIT: I made a workaround for this using Dimension and feeding the screen height to the ImageBackground:

import { View, ImageBackground, StyleSheet,  Dimensions } from 'react-native';
const { height } = Dimensions.get('screen');

const styles = StyleSheet.create({
  background: {
    flex: 1,
    height,
  },
});

Though it works, the question why do I need to set a height for an image in the same folder still stand.

CodePudding user response：

if you want to give a value in percentage in such cases you should use some tricks like:

background:‌ {
  height: deviceHeight,
},
container:‌ {
  height: deviceHeight * 50 / 100,
}

or you can use a popular library in the name of react-native-responsive-screen. This library is going to give you the power to give relative values and convert them to absolute values behind the scene. The snippet below is going to show how to use it:

import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen';


const styles = StyleSheet.create({
  background:‌ {
    height: heightPercentageToDP('100%'),
  }
})

This should work as you expected ;)

CodePudding user response：

If you want your background image to cover your entire view, try something like this:

<View>
        <ImageBackground style={styles.image} resizeMode={'cover'} source={require('../Images/test.jpg')}>
            {/*your components*/}
        </ImageBackground>  
</View>

with this styling:

const styles = StyleSheet.create({
    image: {
        height: '100%',
        width: undefined,
    }
})