Untitled
unknown
plain_text
a year ago
6.7 kB
2
Indexable
Never
/** * 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;