Custom React Component - Text Inside a Card-CodePudding

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
    }
    
  })

CodePudding user response：

It could be your image link require("./assets/gradient_dark_orange_navy.png") is not correct so it does not show the image, try ramdon image to see if it work source={uri: "https://reactjs.org/logo-og.png"}

CodePudding user response：

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, },