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 Voice Narration feature brings Pokédex entries to life using expo-speech for text-to-speech synthesis. The voice is configured to sound like Dexter from the Pokémon anime, with specific pitch and rate settings optimized for Spanish narration.

​
Implementation

The voice functionality is encapsulated in a custom React hook: useDexterVoice.

​
Hook Structure

import * as Speech from 'expo-speech';

export const useDexterVoice = () => {
  const hablarEntrada = (texto, nombrePokemon) => {
    const textoLimpio = texto.replace(/\f/g, ' ');
    const mensajeCompleto = `${nombrePokemon}. ${textoLimpio}`;

    const options = {
      language: 'es-MX',
      pitch: .57,
      rate: 1.2,
      voice: 'es-es-x-eea-network',
    };

    Speech.speak(mensajeCompleto, options);
  };

  const detenerVoz = () => {
    Speech.stop();
  };

  return { hablarEntrada, detenerVoz };
};

​
Voice Configuration

​
Language Settings

The voice is configured for Mexican Spanish (es-MX): 
language: 'es-MX',  // Español Latino
voice: 'es-es-x-eea-network',
This provides authentic Spanish pronunciation for Pokémon names and flavor text.

​
Dexter Voice Parameters

The voice settings are tuned to mimic Dexter’s robotic yet analytical tone: 
pitch: .57,   // Lower pitch for robotic effect
rate: 1.2,    // Slightly faster for analytical feel
  • Pitch: 0.57 - Lower than default to create a deeper, more mechanical voice
  • Rate: 1.2 - Slightly faster than normal speech for clarity and efficiency

​
Usage in Details Screen

The voice narration is triggered automatically when Pokémon details are loaded: 
import { useDexterVoice } from '../../hooks/useDexterVoice';

const { hablarEntrada } = useDexterVoice();

const fetchFullData = async () => {
  // ... fetch and process data ...
  
  setPokemon(processedData);
  setLoading(false);
  
  // Play Pokémon cry first
  await playSound(processedData.cries);
  
  // Then start voice narration after a delay
  setTimeout(() => {
    hablarEntrada(description, data.name);
  }, 800);
};

​
Text Processing

Before narration, the flavor text is cleaned: 
const textoLimpio = texto.replace(/\f/g, ' ');
This removes form feed characters (\f) that sometimes appear in PokéAPI flavor text.

​
Message Format

The complete narration includes the Pokémon name followed by the description: 
const mensajeCompleto = `${nombrePokemon}. ${textoLimpio}`;
Example output:
“Pikachu. Cuando varios de estos Pokémon se juntan, su energía puede causar fuertes tormentas.”

​
Stopping Narration

The hook provides a function to stop ongoing narration: 
const { detenerVoz } = useDexterVoice();

// Stop current narration
detenerVoz();
This uses Speech.stop() from expo-speech.

​
Timing Sequence

The narration is carefully timed with other audio elements:
  1. Pokémon details are fetched from API
  2. Pokémon cry audio plays immediately
  3. 800ms delay
  4. Dexter voice narration begins
See DetailsScreen.js:45 for the timing implementation.

​
Voice Quality

The es-es-x-eea-network voice provides:
  • Natural Spanish pronunciation
  • Network-based synthesis for higher quality
  • Consistent delivery across devices

​
Customization Options

You can adjust the voice characteristics by modifying the options: 
const options = {
  language: 'es-MX',  // Change for different Spanish variant
  pitch: .57,         // Range: 0.5 - 2.0 (lower = deeper)
  rate: 1.2,          // Range: 0.5 - 2.0 (higher = faster)
  voice: 'es-es-x-eea-network',
};

​
Example Variations

More robotic (lower pitch): 
pitch: 0.4,
rate: 1.0,
More energetic (higher pitch, faster): 
pitch: 0.8,
rate: 1.5,

​
expo-speech API

The hook uses two main expo-speech functions:

​
Speech.speak(text, options)

Plays the text with specified voice settings.

​
Speech.stop()

Immediately stops any ongoing speech synthesis.

​
See Also

Implementation: useDexterVoice.js

Build docs developers (and LLMs) love

Get started for freeTalk to us