Getting error while using react native community voice feature to convert speech to text

Question

I am trying to build a AI assistant app which have a speech to text feature. I am using react native community/voice package for this feature but it is showing this error when I try to catch the voice from user -

error - [TypeError: Cannot read property 'startSpeech' of null]

Here is my Home Screen where I am using react native community voice-

import Voice from '@react-native-community/voice';
import * as Permissions from 'expo-permissions';

export default function HomeScreen() {
  const [message,setMessage]=useState(dummyMessages);
  const [recording,setRecording]=useState(false);
  const [speaking,setSpeaking]=useState(false);

  useEffect(() => {
    checkMicrophonePermission();
  }, []);

  const checkMicrophonePermission = async () => {
    try {
      const { status } = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
      
      if (status === 'granted') {
        console.log('Microphone permission granted');
        // Now you can proceed with using the microphone
      } else {
        console.log('Microphone permission denied');
        // Handle denial or show a message to the user
      }
    } catch (error) {
      console.error('Error checking microphone permission:', error);
    }
  };
  
  const speechStartHandler = e =>{
    console.log('Speech start handler');
  }

  const speechEndHandler = e =>{
    setRecording(false);
    console.log('Speech End handler');
  }
  const speechResultHandler = e =>{
    console.log('voice enent:' ,e);
  }
  const speechErrorHandler = e =>{
    console.log('Speech error handler :' ,e);
  }

  const startRecording=async()=>{
    setRecording(true)
    try{
      await Voice.start('en-GB');
    }catch(error){
      console.log('error -', error);
    }
  }

  const stopRecording=async()=>{
    try{
      await Voice.stop();
      setRecording(false);
      //fetch result
    }catch(error){
      console.log('error', error);
    }
  }

  const clear=()=>{
    setMessage([])
  }

  const stopSpeaking=()=>{
    setSpeaking(false);
  }

  useEffect(()=>{
    // voice handler events
    Voice.onSpeechStart = speechStartHandler;
    Voice.onSpeechEnd = speechEndHandler;
    Voice.onSpeechResults = speechResultHandler;
    Voice.onSpeechError= speechErrorHandler;

    return ()=>{
      //destroy the voice instance 
      Voice.destroy().then(Voice.removeAllListeners);
    }
   },[])

  return (
        {/* features || message */}
      {/* recording button, clear history button and stop speaking button */}
    <View style={styles.BtnContainer}>
    {/* start recording */}
      {
        recording? (
          <View style={[styles.recBtn, {backgroundColor:"lightpink", padding:8}]}>
        <TouchableOpacity 
        style={[styles.recBtn, {backgroundColor:"red"}]}
        onPress={stopRecording}>
          <Image style={styles.recBtnImg} source={require('../../assets/mic.png')}/>
        </TouchableOpacity>
      </View>
        ):(
          <View style={[styles.recBtn, {backgroundColor:"#cceee1", padding:8}]}>
        <TouchableOpacity style={styles.recBtn} onPress={startRecording}>
          <Image style={styles.recBtnImg} source={require('../../assets/mic.png')}/>
        </TouchableOpacity>
      </View>
        )

{/* clear history */}
 

I tried everything but still getting this error when I try to record voice

Answer 1

Import fonts on App.js like this

import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
let customFonts = {
'raleway':require('./assets/Fonts/Raleway-Regular.ttf')
};

const App = () => {
const [isLoaded] = useFonts(customFonts);
if (!isLoaded) {
return <AppLoading />;
}
return <RootApp />;
}