Bug: Android issue Voice issue when navigate goBack()

[eggybot]

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Above was the issue I got when I try to navigate::goBack and play the mic button again. I'm not sure why the states we define on contruct is having an issue it already bind functions, is there missing function on this list? (I copied it on the example you provided)

    Voice.onSpeechStart = this.onSpeechStart.bind(this);
    Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this);
    Voice.onSpeechEnd = this.onSpeechEnd.bind(this);
    Voice.onSpeechError = this.onSpeechError.bind(this);
    Voice.onSpeechResults = this.onSpeechResults.bind(this);
    Voice.onSpeechPartialResults = this.onSpeechPartialResults.bind(this);
    Voice.onSpeechVolumeChanged = this.onSpeechVolumeChanged.bind(this);

Could you please guide me if you have come across this issue?

Thanks,

[wenkesj]

I'm not sure, I would have to look into it. Can you possibly record a .gif of the instance or provide a use case for me to test (some context of the code and platform you are using)? I assume this is due to a listener not being destroyed before the component is, as the callback is asynchronous.

[eggybot]

Sorry for no .gif,

Hi, when I use navigate to the function onSpeechResult to redirect to the next page

onSpeechResults(e) {
const { navigate } = this.props.navigation;
navigate('Result', {channelp:0, searchit: true, skeyword: keyvt});
}

but as I go back using navigation.goBack() , the error I mention which happen. But I notice that if the result page is within the current page and move to the other pages and goback, it didn't have any issue.

WHat Listner should I destroy?

thanks,

[wenkesj]

I would do something similar to the example:

removeListeners() {
    const error = Voice.destroy();
    if (Voice.onSpeechStart != null) {
      Voice.onSpeechStart.remove();
      Voice.onSpeechStart = null;
    }
    if (Voice.onSpeechRecognized != null) {
      Voice.onSpeechRecognized.remove();
      Voice.onSpeechRecognized = null;
    }
    if (Voice.onSpeechEnd != null) {
      Voice.onSpeechEnd.remove();
      Voice.onSpeechEnd = null;
    }
    if (Voice.onSpeechError != null) {
      Voice.onSpeechError.remove();
      Voice.onSpeechError = null;
    }
    if (Voice.onSpeechResults != null) {
      Voice.onSpeechResults.remove();
      Voice.onSpeechResults = null;
    }
    if (Voice.onSpeechPartialResults != null) {
      Voice.onSpeechPartialResults.remove();
      Voice.onSpeechPartialResults = null;
    }
    if (Voice.onSpeechVolumeChanged != null) {
      Voice.onSpeechVolumeChanged.remove();
      Voice.onSpeechVolumeChanged = null;
    }
}

And before you navigate from the page or when the component is going to unmount:

onSpeechResults(e) {
  const { navigate } = this.props.navigation;
  this.removeListeners();
  navigate('Result', {channelp:0, searchit: true, skeyword: keyvt});
}

[eggybot]

got this error
Voice.onSpeechStart.remove is not a function

thanks,

[wenkesj]

Ah, I see, I assumed wrong. Try doing this:

removeListeners() {
  Voice.destroy();
}

The listeners are removed in the Voice.destroy() method.

[eggybot]

Now, its working. Thanks

[JohnBlazek]

Just a heads up, you may want to update VoiceTest to reflect this change. Great stuff, BTW.