Untitled

/**
 * 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;