Image disappear when CARD Component is added -React Native

Viewed 61

I am trying to add an image and card component (from react-native-elements library) in my screen (image at the top & card element in the bottom).

But in my final output, Only the card element is shown but the image is not shown in my screen. Anyone can help? Much appreciate!

My Code :

 <View style={styles.FirstContainer}>
        <Image style={styles.img} source={pic} />
        <Card>
        <View style={styles.container}>
                <Icon type='font-awesome-5' name="angle-left" size={80} />
                <Text style={{paddingBottom:20}}>
                {'\n'}
                    Hello world 
                    {'\n'}
                    {'\n'}
                    
                    hello world
                </Text>               
        </View>

        <View style={styles.container}>
                <Icon type='font-awesome-5' name="angle-left" size={80} />
                <Text style={{paddingBottom:20}}>
                {'\n'}
                    Hello world 
                    {'\n'}
                    {'\n'}
                    
                    hello world
                </Text>             
        </View>

        <View style={styles.container}>
                <Icon type='font-awesome-5' name="angle-left" size={80} />
                <Text style={{paddingBottom:20}}>
                {'\n'}
                    Hello world 
                    {'\n'}
                    {'\n'}
                    
                    hello world
                </Text>                    
        </View> 
        </Card>

    </View>

My styleSheet:

const styles = StyleSheet.create({
FirstContainer: {
    flex: 0.5,
    flexDirection: "column"
},

img: {
    flex: 0.5,
    maxWidth: '100%',
},
title: {
    textAlign: 'center',
    fontSize: 15,
    alignItems: 'center',
    paddingRight: 50
},
container: {
    paddingVertical: 15,
    paddingHorizontal: 10,
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
},
})

My output: enter image description here

0 Answers
Related