Skip to main content

​
Overview

The CryptoList component is responsible for displaying a scrollable list of cryptocurrencies. It uses the useCryptoData hook to fetch cryptocurrency data and manages three distinct states:
  • Loading: Shows a spinner while data is being fetched
  • Error: Displays an error message if data fetching fails
  • Success: Renders the list of cryptocurrencies using CryptoCard components
This component does not accept any props and handles all data fetching internally through the useCryptoData hook.

​
Props

This component does not accept any props. All data management is handled internally through the useCryptoData hook.

​
Usage Example

import CryptoList from './components/CryptoList';

function HomePage() {
  return (
    <View style={{ flex: 1 }}>
      <CryptoList />
    </View>
  );
}

​
With Layout Container

import { SafeAreaView } from 'react-native';
import CryptoList from './components/CryptoList';
import HomeHeader from './components/HomeHeader';

function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <HomeHeader />
      <CryptoList />
    </SafeAreaView>
  );
}

​
Component States

Displayed while cryptocurrency data is being fetched from the API.Visual elements:
  • Large green activity indicator (#00e676)
  • “Cargando criptomonedas…” text message
  • Centered vertically and horizontally
  • 100px top padding
<View style={styles.center}>
  <ActivityIndicator size="large" color="#00e676" />
  <Text style={styles.loadingText}>Cargando criptomonedas...</Text>
</View>

​
Data Hook Integration

The component uses the useCryptoData hook to manage data fetching: 
const { data, loading, error } = useCryptoData();
Hook return values:
  • data: Array of CryptoApiResponse objects
  • loading: Boolean indicating fetch in progress
  • error: Error object if fetch failed, null otherwise

​
Styling Details

​
List Container

listContainer: {
  paddingHorizontal: 16,
  paddingTop: 10,
  paddingBottom: 100,
}
  • Horizontal padding: 16px on left and right for margin from screen edges
  • Top padding: 10px spacing from header
  • Bottom padding: 100px to ensure last items are scrollable above any bottom navigation

​
Center Container (Loading/Error)

center: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  paddingTop: 100,
}
Used for both loading and error states to center content with top offset.

​
Text Styles

loadingText: {
  marginTop: 10,
  color: '#aaa',
  fontSize: 16,
}

​
Performance Considerations

The component uses FlatList instead of ScrollView for optimal performance with large datasets. FlatList only renders visible items and recycles components as you scroll.

​
Key Extraction

The keyExtractor function uses the cryptocurrency’s ID to provide stable keys: 
keyExtractor={(item) => item.id.toString()}
This ensures React Native can efficiently track and update individual items.

​
Component Flow

  • CryptoCard: Individual card component rendered for each cryptocurrency
  • HomeHeader: Header component typically placed above CryptoList
  • SearchBar: Search component for filtering the cryptocurrency list

​
Source Code Location

~/workspace/source/src/components/CryptoList.tsx:20

Build docs developers (and LLMs) love

Get started for freeTalk to us