/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
const portfolioArr = [
{
id: 1,
title: 'CTG',
des: 'Vietnam Joint St...',
pnl: '5,600,000',
pnlPer: '1,61',
qty: '1,000',
},
{
id: 2,
title: 'ABC',
des: 'VMG Media JSC',
pnl: '5,600,000',
pnlPer: '1,61',
qty: '1,000',
},
{
id: 3,
title: 'ABS',
des: 'VMG Media JSC',
pnl: '5,600,000',
pnlPer: '1,61',
qty: '1,000',
},
];
import React, {useEffect, useState} from 'react';
import {
FlatList,
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import Svg, {Rect} from 'react-native-svg';
function App(): JSX.Element {
const [user, setUser] = useState<any>([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users').then(response =>
response.json().then(data => {
setUser(data);
}),
);
}, []);
console.log('usâer: ', user);
return (
<SafeAreaView style={styles.sectionContainer}>
<StatusBar backgroundColor="gray" />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={styles.netAsset}>
<View style={styles.netAssetHeading}>
<Text style={styles.netAssetHeadingText}>Net asset value</Text>
<Text>{'>'}</Text>
</View>
<View style={styles.netAssetValue}>
<Text style={styles.netAssetValueNum}>237,000,000</Text>
</View>
<View style={styles.netAssetStatus}>
<Text style={styles.netAssetStatusNum}>7,230,000</Text>
<Text style={styles.netAssetStatusNum}>^</Text>
<Text style={styles.netAssetStatusNum}>2.30%</Text>
</View>
</View>
<View style={styles.netAsset}>
<View style={styles.netAssetHeading}>
<Text style={styles.portfolioText}>My portfolio</Text>
{/* <Image source={} /> */}
<Svg width="100" height="100">
<Rect width="100" height="100" fill="green" />
</Svg>
</View>
<View style={styles.myPortfolioContainer}>
<FlatList
data={portfolioArr}
renderItem={({item}) => (
<TouchableOpacity>
<View style={styles.myPortfolio}>
<View>
<Text style={styles.myPortfolioTit}>{item.title}</Text>
<Text style={styles.myPortfolioDes}>{item.des}</Text>
<View style={styles.myPortfolioBody}>
<View style={styles.myPortfolioPnl}>
<Text style={styles.myPortfolioPnlText}>PnL</Text>
{item.title !== 'ABC' ? (
<Text style={styles.myPortfolioPnlVal}>
{item.pnl}
</Text>
) : (
<Text style={styles.myPortfolioPnlValDown}>
{item.pnl}
</Text>
)}
</View>
</View>
<View style={styles.myPortfolioPnlPer}>
<Text style={styles.myPortfolioPnlText}>PnL(%)</Text>
{item.title !== 'ABC' ? (
<Text style={styles.myPortfolioPnlVal}>
{item.pnlPer}
</Text>
) : (
<Text style={styles.myPortfolioPnlValDown}>
{item.pnlPer}
</Text>
)}
</View>
<View style={styles.myPortfolioPnlQty}>
<Text style={styles.myPortfolioPnlText}>Qty</Text>
<Text style={styles.myPortfolioPnlTextQty}>
{item.qty}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.title}
// eslint-disable-next-line react-native/no-inline-styles
contentContainerStyle={{columnGap: 8}}
horizontal
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
flex: 1,
backgroundColor: '#ebecf0',
},
netAsset: {
margin: 16,
backgroundColor: 'white',
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
},
netAssetHeading: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
netAssetHeadingText: {
fontSize: 14,
color: '#2f4a4b',
},
netAssetValue: {
marginTop: 10,
},
netAssetValueNum: {
fontSize: 22,
fontWeight: '700',
color: '#333333',
},
netAssetStatus: {
marginTop: 8,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
netAssetStatusNum: {
fontSize: 16,
marginRight: 6,
color: '#3fada3',
},
myPortfolioContainer: {
marginTop: 12,
},
portfolioText: {
fontSize: 16,
color: '#2f4a4b',
fontWeight: '500',
},
myPortfolio: {
padding: 8,
backgroundColor: '#f2f6fb',
borderRadius: 8,
},
myPortfolioTit: {
fontSize: 18,
color: '2f4a4b',
fontWeight: '600',
},
myPortfolioDes: {
fontSize: 16,
color: '808a9d',
},
myPortfolioBody: {
marginTop: 12,
},
myPortfolioPnl: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
myPortfolioPnlText: {
fontSize: 16,
color: '#747d8e',
},
myPortfolioPnlVal: {
fontSize: 16,
color: '#45a461',
fontWeight: '500',
},
myPortfolioPnlValDown: {
fontSize: 16,
color: '#e14037',
fontWeight: '500',
},
myPortfolioPnlPer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: 4,
},
myPortfolioPnlQty: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginTop: 4,
justifyContent: 'space-between',
},
myPortfolioPnlTextQty: {
fontSize: 16,
color: '#2f4a4b',
},
});
export default App;