Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soymatudev/Pokedex-Fleek/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The DetailsScreen component displays comprehensive information about a detected Pokémon. It fetches data from the PokéAPI, displays sprites, stats, and descriptions, and provides audio feedback through Pokémon cries and voice narration. Location: ~/workspace/source/src/features/pokedex/DetailsScreen.js

​
Props

​
route
object
required
React Navigation route object containing navigation parameters

​
State Management

​
pokemon
object | null
default:"null"
Complete Pokémon data after fetching and processing
​
loading
boolean
default:"true"
Indicates whether data is being fetched from PokéAPI

​
PokéAPI Data Fetching

The component fetches data from two PokéAPI endpoints:

​
Endpoints

  1. Pokémon Data: https://pokeapi.co/api/v2/pokemon/{pokemonId}
  2. Species Data: https://pokeapi.co/api/v2/pokemon-species/{pokemonId}

​
Fetch Implementation

useEffect(() => {
    const fetchFullData = async () => {
        try {
            pokemonId = parseInt(pokemonId);
            const [resData, resSpecies] = await Promise.all([
                fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`),
                fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`)
            ]);

            const data = await resData.json();
            const species = await resSpecies.json();

            const entry = species.flavor_text_entries.find(
                e => e.language.name === 'es'
            );
            const description = entry 
                ? entry.flavor_text.replace(/\f/g, ' ') 
                : "Datos no encontrados.";

            const processedData = {
                name: data.name.toUpperCase(),
                cries: data.cries.legacy,
                image: data.sprites.front_default,
                type: data.types[0].type.name,
                weight: data.weight / 10,
                height: data.height / 10,
                description: description
            }

            setPokemon(processedData);
            setLoading(false);
            
            await playSound(processedData.cries);
            setTimeout(() => {
                hablarEntrada(description, data.name);
            }, 800);

        } catch (error) {
            console.error("Error en la conexión con la PokéAPI", error);
        }
    };
    fetchFullData();
}, [pokemonId]);
The component uses Promise.all() to fetch both endpoints concurrently for better performance

​
Display Elements

​
Pokémon Sprite

Displays the front-facing default sprite with pixelated rendering: 
<View style={styles.imageContainer}>
    <Image
        source={{ uri: pokemon.image }}
        style={styles.pixelArt}
        resizeMode="contain"
    />
</View>
Sprite Style: 
pixelArt: {
    width: 288,
    height: 288,
    imageScaling: 'pixelated',
    imageRendering: 'pixelated',
    resizeMode: 'stretch'
}

​
Name Display

<Text style={styles.nameText}>{pokemon.name}</Text>

​
Type Badge

Type-themed colored badge: 
<View style={[styles.typeBadge, { backgroundColor: typeColor }]}>
    <Text style={styles.typeText}>{pokemon.type.toUpperCase()}</Text>
</View>

​
Stats Display

Weight and height information: 
<View style={styles.statsRow}>
    <View style={styles.statBox}>
        <Text style={styles.statValue}>{pokemon.weight} kg</Text>
        <Text style={styles.statLabel}>PESO</Text>
    </View>
    <View style={styles.statBox}>
        <Text style={styles.statValue}>{pokemon.height} m</Text>
        <Text style={styles.statLabel}>ALTURA</Text>
    </View>
</View>

​
Description (Pokédex Entry)

Italicized Pokédex description in Spanish: 
<View style={styles.descriptionContainer}>
    <Text style={styles.descriptionText}>"{pokemon.description}"</Text>
</View>

​
Voice Narration

The component uses a custom useDexterVoice hook to narrate the Pokédex entry: 
const { hablarEntrada } = useDexterVoice();

// Triggered 800ms after data loads
setTimeout(() => {
    hablarEntrada(description, data.name);
}, 800);
Voice narration is delayed by 800ms to allow the Pokémon cry audio to play first

​
Sound Playback

​
Pokémon Cry

Plays the Pokémon’s cry sound automatically when data loads: 
const { playSound } = useSound();

await playSound(processedData.cries);

​
Manual Sound Trigger

Sound button allows replaying the cry: 
<TouchableOpacity
    style={styles.soundButton}
    onPress={() => playSound(pokemon.cries)}
    activeOpacity={0.7}
>
    <Text style={styles.soundIcon}>🔊</Text>
</TouchableOpacity>

​
Type-Based Theming

The screen background color adapts to the Pokémon’s primary type: 
const typeColor = theme.colors.types[pokemon.type] || theme.colors.primary;

return (
    <ScrollView style={[styles.container, { backgroundColor: typeColor }]}>
        {/* Content */}
    </ScrollView>
);

​
Type Color Mapping

Colors are defined in the theme configuration: 
// Example from theme/theme.js
colors: {
    types: {
        fire: '#F08030',
        water: '#6890F0',
        grass: '#78C850',
        electric: '#F8D030',
        // ... more types
    }
}

​
Loading State

Displays a loading indicator while fetching data: 
if (loading) {
    return (
        <View style={styles.loaderContainer}>
            <ActivityIndicator size="large" color={theme.colors.primary} />
            <Text style={{ marginTop: 10, color: theme.colors.textSecondary }}>
                Accediendo a la base de datos...
            </Text>
        </View>
    );
}

​
Data Processing

​
Weight and Height Conversion

PokéAPI returns weight in hectograms and height in decimeters, converted to metric: 
weight: data.weight / 10,  // hectograms to kg
height: data.height / 10,  // decimeters to m

​
Description Cleanup

Removes form feed characters from flavor text: 
const description = entry 
    ? entry.flavor_text.replace(/\f/g, ' ') 
    : "Datos no encontrados.";

​
Custom Hooks

​
useDexterVoice

Provides text-to-speech functionality: 
const { hablarEntrada } = useDexterVoice();
hablarEntrada(description, pokemonName);

​
useSound

Handles audio playback: 
const { playSound } = useSound();
await playSound(audioUrl);

​
Dependencies

  • react-native-svg - SVG rendering support (for dream world sprites)
  • react-native-safe-area-context - Safe area handling
  • Custom hooks: useDexterVoice, useSound
  • Theme configuration

​
Usage Example

import { DetailsScreen } from './features/pokedex/DetailsScreen';

// In your navigation stack
<Stack.Screen 
    name="Details" 
    component={DetailsScreen}
/>

// Navigate to screen
navigation.navigate('Details', { pokemonId: 25 }); // Pikachu

​
Error Handling

Errors during data fetching are logged to the console: 
catch (error) {
    console.error("Error en la conexión con la PokéAPI", error);
}
The component does not display error UI to the user. Consider adding error state management for production apps.

Build docs developers (and LLMs) love

Get started for freeTalk to us