[iOS] When a phone call is received while recording, the recording is stopped but the recorderState remain in "recording"

[Poli97]

trafficstars

On iOS devices, when you are recording an audio in the live mode, and in the meantime a phone call is received, as soon as the phone call is received, the recording is automatically being stopped, you can see the audio waves animation stopping, but the "status change" is not detected by either the onRecorderStateChange method and neither the ref.current.currentState, and it remain in "recording" mode even if it's stopped. This makes really hard to provide a proper user experience.

Little snippet:

export const Recorder = ({
  waveFormRef,
  isRecording,
  timer,
}: IRecorderProps) => {
  useKeepAwake();

  const onRecorderStateChange = useCallback((state: RecorderState) => {
    console.log('DEBUGCALL onRecorderStateChange', state);
  }, []);

  useEffect(() => {
    const status = waveFormRef.current?.currentState;

    console.log('DEBUGCALL useEffect isRecording', isRecording);
    console.log('DEBUGCALL useEffect currentState', status);
  }, [isRecording, waveFormRef, waveFormRef.current?.currentState]);

  return (
    <View style={styles.contentBox}>
      {!isRecording && (
        <Text style={styles.descriptionText}>
          Choose the recording type and{'\n'}press record and we'll generate
          {'\n'}a perfect note.
        </Text>
      )}
      {isRecording && (
        <>
          <View style={styles.timerView}>
            <View style={styles.timeRow}>
              <RecordCircleIcon />
              <Text style={styles.timeLabel}> Recording</Text>
            </View>
            <Text style={styles.timerText}>{formatTime(timer)}</Text>
          </View>
          <View style={styles.waveform}>
            <Waveform
              mode="live"
              ref={waveFormRef}
              candleSpace={2}
              candleWidth={4}
              candleHeightScale={5}
              onRecorderStateChange={onRecorderStateChange}
              waveColor={theme.colors.primaryBlue}
            />
          </View>
        </>
      )}
    </View>
  );
};

Video:

https://github.com/user-attachments/assets/be8c6efc-f125-40eb-be6d-60c00cf7fff5