I am testing offline behavior and errors in a React Native app. I have a modal that is shown and hidden in its parent like this:

    return (
        ...
        {showTranslationProgress && (
          <TranslatingRecipesView
            ...
            setShowTranslationProgress={setShowTranslationProgress}
            ...
          />
        )}
        ...
   )

This modal shows a progress bar on mount that is then closed once the job is finished. It works as expected except in the case of the last else block here in the modal:

 } catch (err) {   
      setShowTranslationProgress(false);
      if (err.message === noInternet) {
         Alert.alert(noInternet, noInternetMessage);
      } else {
         Alert.alert(ErrorCodeOthers);
      }

      i18n.changeLanguage(prevGlobalLanguageCode);
   }

In the first error case, I am throwing a new Error() and the progress bar hides when the alert pops up, as expected. The last case catches all other errors and when it is triggered, the progress bar does not hide and I can see it behind the alert. The only difference I have been able to find is that the type of error is an Axios error. Though even when I just throw a regular error instead of passing along the Axios error, it still happens, so I am stumped.

All logs in the parent and in the modal seem to confirm that the state is being properly updated. I have tried:

1. Moving setShowTranslationProgress(false) around in different places inside the catch block.
2. Putting the alerts in a setTimeout.
3. Adding a finally block and calling setShowTranslationProgress(false) there.
4. Wrapping the Axios error in a new Error() at the place it is thrown.
5. Not passing along the Axios error and just throwing a normal Error like I do in the other cases.
6. Forcing a re-render of the parent and modal.
7. Decreasing the timeout of the axios request.
8. Using the modal’s visible property instead of the conditional rendering in the parent.

Here is where the error happens. If the ‘No internet’ block is triggered, the progress bar hides as expected, if the catch block inside that is triggered, it doesn’t. Notice I have commented out throwing the Axios error and am just throwing a standard Error:

static async getUnitOfMeasureTranslation(
    unitOfMeasureList: UnitOfMeasureModel[],
    targetLanguage: string
  ) {
    const unitOfMeasureData: any[] = [];
    unitOfMeasureList.map((unitOfMeasure) => {
      unitOfMeasureData.push({Text: unitOfMeasure.description});
    });
    const state = await NetInfo.fetch();
    if (state.isConnected) {
      try {
        const response = await this.getTranslation(
          unitOfMeasureData,
          targetLanguage
        );
        const translatedData = response.data;
        const updatedTranslatedData = unitOfMeasureList.map(
          (unitOfMeasure,index) => {
            return {
              ...unitOfMeasure,
              description: translatedData[index].translations[0].text,
              unique_id: unitOfMeasure.uom_id + '_' + targetLanguage,
              language: targetLanguage,
            };
          }
        );
        await createData(SchemaNames.UnitOfMeasureTranslationSchema,{
          title: 'UnitOfMeasure',
          data: updatedTranslatedData,
        });
        const mergedUnitOfMeasure = await this.mergeUnitOfMeasureTranslation();
        return mergedUnitOfMeasure;
      } catch(e) {
        console.log(`ERROR TRANSLATING UNIT OF MEASURE TO ${targetLanguage}:`,e);
        // throw e
        throw new Error(translationNoInternetMessage);
      } 
    } else {
      throw new Error(noInternet);
    }
  }

UPDATE: If I throw an error right before the axios request, inside the try block, it works as expected. If I throw one right after, it doesn’t. This leads me to believe it has something to do with the request itself, which is baffling to me.

I didn’t want to overwhelm with code as there is a lot. Since it works in most cases I thought isolating it would be most helpful. I can supply more code if needed though.