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