Why is my image (and child components) not showing with ImageBackground on React Native?

I am having an issue with the image just showing up on the application. Through search results, I mostly see the solution being that that the height and width was required and missing, but I have already implemented with no results.

I have looked at the routes multiple times and don't see any issues on that end.

Lastly, I thought it could be something to do with the image. I have altered the size and it worked with the <Image /> tag. However, I need it to be a background image.

<Image />

import React from 'react'
import View, Text, StyleSheet, ImageBackground from 'react-native';
import MaterialCommunityIcons from '@expo/vector-icons'

export default function TitleScreen ()

return (
<View>
<ImageBackground
source=require('../assets/images/title_background.png')
style=styles.backgroundImage
imageStyle=resizeMode: 'cover'
>
<Text>testing</Text>
/* <MaterialCommunityIcons
name='cards-outline'
size=100
/> */
</ImageBackground>
</View>
)


const styles = StyleSheet.create(
backgroundImage:
flex: 1,
width: '100%',
height: '100%',

);


flex: 1

view

1 Answer
1

Answered! The answer was to add flex: 1 to the parent view container - for those running into the same problem.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.