expo-speech getAvailableVoicesAsync problem

expo-speech-getAvailableVoicesAsync.jsx

import { Text, SafeAreaView, StyleSheet, ActivityIndicator, View } from 'react-native';
import React, { useState, useEffect } from 'react';

import * as Speech from 'expo-speech';

export default function App() {
  const [voicesNumber, setVoicesNumber] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchNumber = async () => {
      try {
        const voices = await Speech.getAvailableVoicesAsync();
        setVoicesNumber(voices.length);
      } catch (error) {
        console.error("Error fetching voices.length:", error);
        setVoicesNumber('Error');
      } finally {
        setIsLoading(false);
      }
    };

    fetchNumber();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.loadingContainer}>
        {isLoading ? (
          <ActivityIndicator size="large" color="#0000ff" />
        ) : (
          <Text style={styles.numberDisplay}>
            Voice length is: {voicesNumber}
          </Text>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});