Skip to main content

​
Overview

The CryptoCard component renders a touchable card that displays key information about a cryptocurrency, including its name, symbol, price, 24-hour percentage change, and market rank. When tapped, it navigates to the detailed view of that cryptocurrency. This component is typically used within a list to display multiple cryptocurrencies, and provides visual feedback for price changes through color-coded percentage indicators.

​
Props

​
crypto
CryptoApiResponse
required
An object containing the cryptocurrency data to display. The CryptoApiResponse interface includes:
  • id (string): Unique identifier for the cryptocurrency
  • name (string): Full name of the cryptocurrency (e.g., “Bitcoin”)
  • symbol (string): Trading symbol (e.g., “BTC”)
  • rank (number): Market cap ranking position
  • price_usd (string): Current price in USD
  • percent_change_24h (string): 24-hour percentage change
  • Additional fields: percent_change_1h, percent_change_7d, market_cap_usd, volume24, etc.

​
Usage Example

import CryptoCard from './components/CryptoCard';
import { CryptoApiResponse } from './models/Crypto';

const cryptoData: CryptoApiResponse = {
  id: '90',
  name: 'Bitcoin',
  symbol: 'BTC',
  rank: 1,
  price_usd: '45000.50',
  percent_change_24h: '2.45',
  // ... other fields
};

function App() {
  return <CryptoCard crypto={cryptoData} />;
}

​
Usage in a List

The component is commonly used with FlatList to render multiple cryptocurrencies: 
import { FlatList } from 'react-native';
import CryptoCard from './components/CryptoCard';

function CryptoList() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <CryptoCard crypto={item} />}
    />
  );
}

​
Component Behavior

When a user taps on the card, it navigates to the cryptocurrency detail page using the crypto’s ID: 
router.push({
  pathname: '/crypto/[id]',
  params: { id: crypto.id },
});

​
Price Change Indicator

The 24-hour percentage change is displayed with conditional styling:
  • Positive changes (≥ 0%): Displayed in green (#4caf50)
  • Negative changes (< 0%): Displayed in red (#ef5350)
  • Positive values include a + prefix

​
Price Formatting

Prices are formatted using the formatToUSD utility function, which converts numeric values to US currency format: 
import { formatToUSD } from '../utils/formatters';

const price = parseFloat(crypto.price_usd || '0');
formatToUSD(price); // Returns: "$45,000.50"

​
Styling Details

​
Card Container

  • Background: Deep blue (#1c1c7e)
  • Border radius: 12px for rounded corners
  • Padding: 16px on all sides
  • Margin: 10px vertical spacing between cards
  • Shadow: Elevated appearance with shadow and elevation properties

​
Text Styles

  • Name: 20px bold white text
  • Symbol: 14px gray text (#aaa) displayed in parentheses

​
Layout Structure

The card uses a two-row layout: 
┌─────────────────────────────────┐
│ Bitcoin (BTC)           #1      │ ← Top row
│ $45,000.50      +2.45% (24h)    │ ← Bottom row
└─────────────────────────────────┘
  • Top row: Flexbox with space-between alignment (name/symbol on left, rank on right)
  • Bottom row: Flexbox with space-between alignment (price on left, change on right)
  • CryptoList: List container that renders multiple CryptoCards
  • SearchBar: Search and filter cryptocurrencies
  • HomeHeader: Header component that includes the SearchBar

​
Source Code Location

~/workspace/source/src/components/CryptoCard.tsx:21

Build docs developers (and LLMs) love

Get started for freeTalk to us