Значение пока подставил тестовые ,стейт массив из 3 -ех обьектов

Question

React Native — русскоговорящее сообщество

Значение пока подставил тестовые ,стейт массив из 3 -ех обьектов

{listProducts?.length &&
listProducts.map((pack) => {
return (
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.55)',
width: '100%',
padding: '2.5%',
marginBottom: '5%',
borderRadius: 8,
}}>
<View style={{display: 'flex', flexDirection: 'row'}}>
<View
style={{
backgroundColor: '#fff',
width: 48,
height: 48,
borderRadius: 48,
marginRight: '5%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 24,
fontWeight: 'bold',
color: '#002762',
}}>
{pack.price}
</Text>
</View>
<View>

<Text
style={{
color: '#003078',
fontSize: 18,
fontWeight: 'bold',
}}>
{pack.price}
</Text>

<Text style={{fontSize: 16, color: '#102A43'}}>
{pack.price}
</Text>

</View>
</View>
<TouchableOpacity
style={{
backgroundColor: '#0050C8',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
paddingTop: '5%',
paddingBottom: '5%',
paddingLeft: '10%',
paddingRight: '10%',
}}>
<Text
style={{color: '#fff', fontSize: 16, fontWeight: 'bold'}}>
Buy
</Text>
</TouchableOpacity>
</View>
);
})}