React Native Image background not showing

Question

I am new on react native but need to fix some changes in react native app :P I am trying to change background image but don't know why its not changing.

Code

return (

    <StatusBar translucent={true} backgroundColor="transparent" />

    <View>
        <ImageBackground
            style={{ height: '100%', width: '100%', resizeMode: 'cover', opacity: 1 }}
            source={require('./../../../public/images/order_place.png')}
        >
            <ImageBackground
                style={{ height: '100%', width: '100%', resizeMode: 'cover', opacity: 1 }}
                source={require('./../../../public/images/empty_order_place.png')}
            >
                <View style={{
                    justifyContent: 'center', alignItems: 'center', marginTop: 'auto',
                }}>
                    <Image
                        source={require('../../../public/icons/success.png')}
                    // style={styles.iconStyle}
                    />
                    <Text style={styles.orderPlaceText}>
                        Order Placed
                    </Text>

                    <Text style={{
                        fontSize: 16,
                        fontWeight: "bold",
                        color: "white"
                    }}>
                        Order# {route.params.orderNumber}
                    </Text>

                    <Text style={styles.heading}>
                        {route.params.brandName}, {route.params.branchLocation.Address}
                    </Text>
                    <Text style={styles.description}>
                    {route.params.description}
                    </Text>
                    <Text style={styles.thanks}>
                        Thank you !
                    </Text>
                </View>
                <View style={{
                    justifyContent: 'center', alignItems: 'center',
                    marginTop: 'auto', marginBottom: 40
                }}>
                    <TouchableOpacity
                        style={{
                            backgroundColor: '#ff8955',
                            borderRadius: 8,
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: 300,
                            height: 50,
                        }}
                        onPress={() => {
                            navigation.dispatch(
                                StackActions.popToTop()
                            );
                            navigation.navigate('Orders');
                        }}
                    >
                        <Text style={{ color: 'white', fontSize: 14, fontWeight: 'bold', lineHeight: 23.5 }}>
                            TRACK MY ORDER
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => navigation.navigate('Home')}
                        style={{
                            width: 300,
                            height: 50,
                            borderWidth: 1.5,
                            borderColor: 'white',
                            borderRadius: 8,
                            marginTop: 16,
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <Text style={{ fontSize: 15, color: 'white' }}>Back to Home</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </ImageBackground>
    </View>
</View>

)

Try to change the path also but the Background image isn't showing not showing any error in the node. In the previous build, the image is showing but after don't know why whats the issue is not showing.

Answer 1

try style in ImageBackground like this:-

style={{ position:"absolute",top:0,left:0, bottom:0,right:0 }}