CODEWITHSUNDEEP
react-nativebackground-imagereact-native-ios
Alize Nguyen
Alize Nguyen

Reputation: 51

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.

Current Code

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%',
  }
});

Folder Layout

Upvotes: 2

Views: 1281

Answers (1)

Alize Nguyen
Alize Nguyen

Reputation: 51

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

Upvotes: 3

Related Questions