Pokédex Entries

Display detailed Pokémon information with PokéAPI integration

Overview

The Pokédex entry screen displays comprehensive information about each detected Pokémon by fetching data from PokéAPI. It includes sprites, stats, types, flavor text descriptions, and audio cries.

PokéAPI Integration

Fetching Pokémon Data

The screen fetches data from two PokéAPI endpoints in parallel:

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();
    
    // Process data...
  } catch (error) {
    console.error("Error en la conexión con la PokéAPI", error);
  }
};

Data Processing

The app extracts and processes the following data:

// Extract Spanish flavor text
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,  // Convert to kg
  height: data.height / 10,  // Convert to meters
  description: description
}

Display Components

Pokémon Sprite

The sprite is displayed using React Native’s Image component with pixelated rendering:

<Image
  source={{ uri: pokemon.image }}
  style={styles.pixelArt}
  resizeMode="contain"
/>

Styles:

pixelArt: {
  width: 288,
  height: 288,
  imageScaling: 'pixelated',
  imageRendering: 'pixelated',
  resizeMode: 'stretch'
}

Name and Type Badge

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

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

Stats Display

Weight and height are displayed in a row:

<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>

Flavor Text Description

The Spanish flavor text is displayed in an italic, centered format:

<View style={styles.descriptionContainer}>
  <Text style={styles.descriptionText}>"{pokemon.description}"</Text>
</View>

Styles:

descriptionText: {
  fontSize: 18,
  lineHeight: 26,
  textAlign: 'center',
  fontStyle: 'italic',
  color: theme.colors.text
}

Type-Based Color Theming

The background color changes based on 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>
);

The type badge also uses this color:

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

Audio Cry Playback

Pokémon cries are played automatically when the details screen loads:

const { playSound } = useSound();

setPokemon(processedData);
setLoading(false);

// Play cry audio
await playSound(processedData.cries);

// Start voice narration after a delay
setTimeout(() => {
  hablarEntrada(description, data.name);
}, 800);

Manual Playback Button

Users can replay the cry using a sound button:

<View style={styles.statBox}>
  <TouchableOpacity
    style={styles.soundButton}
    onPress={() => playSound(pokemon.cries)}
    activeOpacity={0.7}
  >
    <Text style={styles.soundIcon}>🔊</Text>
  </TouchableOpacity>
</View>

Loading State

While data is being fetched, an activity indicator is displayed:

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>
  );
}

Card Layout

The information is displayed in a rounded card design:

infoCard: {
  backgroundColor: theme.colors.surface,
  borderTopLeftRadius: 40,
  borderTopRightRadius: 40,
  padding: 30,
  minHeight: 500,
  alignItems: 'center'
}

Data Flow

1. Screen receives pokemonId from navigation params
2. Fetches data from PokéAPI (pokemon and species endpoints)
3. Processes and formats the data
4. Plays Pokémon cry audio
5. Triggers Dexter voice narration (see Voice Narration)
6. Displays all information with type-based theming

API Endpoints Used

• https://pokeapi.co/api/v2/pokemon/{pokemonId} - Main Pokémon data
• https://pokeapi.co/api/v2/pokemon-species/{pokemonId} - Species data and flavor text

See DetailsScreen.js:20 for the full implementation.