Custom React Component - Text Inside a Card

Question

I am trying to create a custom React Component: A "Card" with styling that makes it look like a gray rectangle with text inside of it.

I'll attach the files, but the simulator screen is white and it doesn't show the Background Image with the Card with the Text. If I get rid of the "default" word in the Card component, then it just shows the gray card but still no background image.

Any ideas? Thanks!

That's App.js

import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, Dimensions } from 'react-native';
import {Card} from './Components/Card'

const deviceWidth = Dimensions.get('window').width


export default function App() {
  return (
    <View>
    <ImageBackground style={{flex: 1}} source={require("./assets/gradient_dark_orange_navy.png")}>
    <Card title='MY TITLE!'></Card>
    </ImageBackground>
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4ae74',
    alignItems: 'center',
    justifyContent: 'center',
  },
  smallImage: {
    width: 50,
    height: 50
  },
  mediumImage: {
    width: 150,
    height: 150
  },
  container: {
    flex: 1,
    backgroundColor: '#f4ae74',
    justifyContent: 'center',
  },    
bar: {
    position: 'absolute',
    bottom: 0,
    width: "100%",
    height: "10%",
    backgroundColor: '#FFC107',
    borderRadius: 9,
},
card: {
    width: deviceWidth - 32,
    marginHorizontal: 16,
    backgroundColor: 'lightgray',
    height: deviceWidth * 1,
    borderRadius: 35,
  },
shadowProp: {
    shadowRadius: 12,
    shadowOpacity: 0.8,
    shadowColor: "#757575",
    shadowOffset: {
        width: 0,
        height: 3,
    }
  },
  openingCardStyle:{
    bottom: 65, 
    position: 'absolute', 
    height: 550
  }
  
});

Then this is Card.js

import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('window').width

export function Card (props) {

  return (
    <View style={[styles.card, styles.shadowProp, styles.openingCardStyle]}>
    <Text style={{align: 'center'}}>
      {props.title}
      {props.subtitle}
    </Text>
    </View>

  );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#f4ae74',
      alignItems: 'center',
      justifyContent: 'center',
    },
    smallImage: {
      width: 50,
      height: 50
    },
    mediumImage: {
      width: 150,
      height: 150
    },
    container: {
      flex: 1,
      backgroundColor: '#f4ae74',
      justifyContent: 'center',
    },    
  bar: {
      position: 'absolute',
      bottom: 0,
      width: "100%",
      height: "10%",
      backgroundColor: '#FFC107',
      borderRadius: 9,
  },
  card: {
      width: deviceWidth - 32,
      marginHorizontal: 16,
      backgroundColor: 'lightgray',
      height: deviceWidth * 1,
      borderRadius: 35,
    },
  shadowProp: {
      shadowRadius: 12,
      shadowOpacity: 0.8,
      shadowColor: "#757575",
      shadowOffset: {
          width: 0,
          height: 3,
      }
    },
    openingCardStyle:{
      bottom: 65, 
      position: 'absolute', 
      height: 550
    }
    
  })

Answer 1

可能是你的图片链接require("./assets/gradient_dark_orange_navy.png")不正确，所以它不显示图片，试试 ramdon image 看看它是否有效source={uri: "https://reactjs.org/logo-og.png"}

Answer 2

The problem is in your card styling(styles.card) inside Card.js file, You have given backgroundColor property inside styles.card object which is overriding your ImageBackground.

Just remove backgroundColor property from styles.card

card: {
    width: deviceWidth - 32,
    marginHorizontal: 16,
    height: deviceWidth * 1,
    borderRadius: 35,
},