PriceExplorer CurrencyRow

Balance.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

type Props = {
  value: number;
};

export default function Balance({value}: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Portfolio Balance</Text>
      <Text style={styles.title}>${value.toString()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    color: 'grey',
    fontWeight: '500',
  },
  title: {
    fontSize: 32,
    fontWeight: '500',
  },
});

CurrencyRow.tsx

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import Spacer from './Spacer';

type Props = {
  name: string;
  icon: string;
  symbol: string;
  usd: number;
};

export default function CurrencyRow({name, icon, symbol, usd}: Props) {
  return (
    <View style={styles.container}>
      <Image source={{uri: icon}} style={styles.image} />
      <Spacer width={16} />
      <View style={styles.leftColumn}>
        <Text style={styles.title} numberOfLines={1}>
          {name}
        </Text>
        <Spacer height={4} />
        <Text style={styles.subtitle}>{symbol}</Text>
      </View>
      <Spacer />
      <View style={styles.rightColumn}>
        <Text style={styles.title}>{usd.toString()}</Text>
        <Spacer height={2} />
        <Text style={styles.price}>+0.80%</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingVertical: 12,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  image: {
    width: 36,
    height: 36,
    borderRadius: 18,
  },
  title: {
    fontSize: 22,
    fontWeight: '300',
  },
  subtitle: {
    fontSize: 13,
    color: 'rgba(0,0,0,0.5)',
  },
  price: {
    fontSize: 18,
    color: 'mediumseagreen',
    fontWeight: '300',
  },
  leftColumn: {
    flex: 1,
  },
  rightColumn: {
    alignItems: 'flex-end',
  },
});

resource.ts

export type Currency = {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  usd: number;
  icon: string;
};

export type HistoricalPrice = {
  date: string;
  usd: number;
};

export function currencies(): Currency[] {
  return data;
}

const data: Currency[] = [
  {
    id: 'NzcucMqj2',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Bitcoin',
    rank: 1,
    symbol: 'BTC',
    usd: 10403.225432572899,
  },
  {
    id: 'UNB33kmPvl',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Ethereum',
    rank: 2,
    symbol: 'ETH',
    usd: 321.0852636071127,
  },
  {
    id: 'Ye9v02h1yB',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'XRP',
    rank: 3,
    symbol: 'XRP',
    usd: 0.031146111168099146,
  },
  {
    id: 'sslKSG8UWc',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Bitcoint Cash',
    rank: 4,
    symbol: 'BCH',
    usd: 95.26885858400416,
  },
  {
    id: 'OzaBu5YrdR',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Litecoin',
    rank: 5,
    symbol: 'LTC',
    usd: 113.26068241294408,
  },
  {
    id: 'o2qB71E5gA',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Stellar Lumens',
    rank: 6,
    symbol: 'XLM',
    usd: 0.05643955012041886,
  },
  {
    id: 'Z9lX83lV88',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Binance Coin',
    rank: 7,
    symbol: 'BNB',
    usd: 17.85464158639072,
  },
  {
    id: 'TE80yFVuas',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'EOS',
    rank: 8,
    symbol: 'EOS',
    usd: 3.855903650694415,
  },
  {
    id: 'H5W6_412pI',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Tezos',
    rank: 9,
    symbol: 'XTZ',
    usd: 4.517382329979666,
  },
  {
    id: 'rToxhn43tt',
    icon:
      'https://unpkg.com/[email protected]/32@2x/color/[email protected]',
    name: 'Monero',
    rank: 10,
    symbol: 'XMR',
    usd: 78.09242503655813,
  },
];

Spacer.tsx

import React from 'react';
import {View, ViewStyle} from 'react-native';

type Props = {
  width?: number;
  height?: number;
};

export default function Spacer({width, height}: Props) {
  const style: ViewStyle = {
    flex: !width && !height ? 1 : undefined,
    width,
    height,
  };

  return <View style={style} />;
}