How to create a complex view and card in react native - react-native

Question

I want to create a custom card in react native and it gets me confused as to use the views.
I have tried to make a card following the tutorial but I am not getting anywhere since its very confusing.The image below is what I'm trying to achieve.
This is what I have
trying to make the card
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Platform } from "react-native";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.squareShapeView}/>
<View style={{flex:0.7}}>
<Text>Test1</Text>
<Text>Test1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:50,
justifyContent: 'center',
alignItems:'center',
flexDirection:'row',
borderWidth:0.3,
marginLeft:30,
marginRight:30
},
squareShapeView: {
//To make Square Shape
width:20,
height:70,
backgroundColor: '#14ff5f',
alignSelf:'flex-start'
},
});
This is what I expect to get
this is what I expect

Answer 1

I hope this might help you
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
const Card = ({ title, desc }) => (
<View style={styles.cardContainer}>
<View style={styles.cardContent}>
<View style={{ flexDirection: 'column' }}>
<Text>{title}</Text>
<Text>{desc}</Text>
</View>
<MaterialIcons name="navigate-next" size={40} color="red" />
</View>
</View>
)
export default class App extends React.Component {
constructor(props) {
super(props);
this.cards = [
{
title: 'Top up',
desc: 'Top up any number'
},
{
title: 'Top up history',
desc: 'View all of the top up you have made'
}
]
}
renderCards = () => {
return this.cards.map(card => (
<Card
title={card.title}
desc={card.desc}
/>
))
}
render() {
return (
<View style={styles.container}>
{this.renderCards()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 25,
},
cardContainer: {
paddingTop: 30,
paddingBottom: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffset: { x: 0, y: 10 },
shadowOpacity: 1,
borderLeftColor: 'blue',
borderLeftWidth: 10,
alignSelf: 'stretch',
backgroundColor: 'white',
marginTop: 20,
},
cardContent: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: 20,
}
});
https://snack.expo.io/#xavier96/aGVscC