import React, { Component } from
"react"
;
import { Text, View, StyleSheet, ScrollView } from
"react-native"
;
class App extends Component {
state = {
items: [
{ item:
"Item 1"
, price:
"10"
, id: 1 },
{ item:
"Item 2"
, price:
"20"
, id: 2 },
{ item:
"Item 3"
, price:
"30"
, id: 3 },
{ item:
"Item 4"
, price:
"40"
, id: 4 },
{ item:
"Item 5"
, price:
"50"
, id: 5 },
{ item:
"Item 6"
, price:
"60"
, id: 6 },
{ item:
"Item 7"
, price:
"70"
, id: 7 },
{ item:
"Item 8"
, price:
"80"
, id: 8 },
{ item:
"Item 9"
, price:
"90"
, id: 9 },
{ item:
"Item 10"
, price:
"100"
, id: 10 },
{ item:
"Item 11"
, price:
"110"
, id: 11 },
{ item:
"Item 12"
, price:
"120"
, id: 12 },
{ item:
"Item 13"
, price:
"130"
, id: 13 },
{ item:
"Item 14"
, price:
"140"
, id: 14 },
{ item:
"Item 15"
, price:
"150"
, id: 15 },
],
};
render() {
return
(
<View style={styles.screen}>
<ScrollView style={styles.container}>
{
this
.state.items.map((item, index) => (
<View key={item.id}>
<View style={styles.text}>
<Text>
{item.item} <Text style={styles.amount}>
${item.price}</Text>
</Text>
</View>
</View>
))}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
screen: {
margin: 20,
},
text: {
flexDirection:
"row"
,
alignItems:
"center"
,
justifyContent:
"space-between"
,
marginBottom: 20,
padding: 10,
borderRadius: 10,
backgroundColor:
"green"
,
},
amount: {
color:
"#C2185B"
,
},
});
export
default
App;