During Offline Warning image is not displayed.

[LudinaReema]

I am trying to display the alert dropdown when there is no internet with the warn default image. The image part won't display. Only the text will display in alert dropdown. Is there a way to display the image in offline mode in iOS and Android?

[testshallpass]

It should work as you described because the warn image is a local source. Please post how you rendered DropDownAlert component. I suspect it is overwritten, please double check this as well. Thanks

[asahi7]

Hi!

Same happens for me. I have run your library as a dependency in my expo app. While running on Android, it does not show the icons in offline mode. In online mode, everything works fine.

Here is the code:

handleConnectivityChange (isConnected) {
    if (isConnected) {
      this.online = true
      this.dropdown.alertWithType('success', 'Success', i18n.t('backonline'))
      this.getApiDataOnline()
    } else {
      this.online = false
      this.dropdown.alertWithType('warn', 'Warning', i18n.t('nointernet'))
    }
  }

The dropdown component was not overwritten.

[BSoD38]

I can also confirm this. In my React-Native project, I simply show the dropdown if a request is about to be made and the internet is unreachable.

When there is no internet, the icon doesn't show up. When I invert the condition (show the dropdown only if there is internet), the icon shows up as intended.

    const netState = await NetInfo.fetch();
    if (!netState.isInternetReachable) {
      NavigationService.dropDown.alertWithType(
        "info",
        strings.common.offline_title,
        strings.common.offline_message
      );
      ifNoInternet();
    }

If the image is loaded successfully once (for example, if I revert the condition so that the dropdown shows only when there is internet), the image will display even when internet is unavailable. It's probably due to the app caching the image, and retrieving it from the cache.

Although I admit that it's quite strange that RN doesn't want to load a locally stored image if there's no internet.

I use RN 0.60.4 with RNDropdownalert 4.1.1.

[schellack]

This workaround causes a prop types validation, but does allow me to show the error icon when offline (I'm using a data-uri, base64-encoded version of the Material Icons error icon in this example):

<DropdownAlert
  defaultContainer={{
    padding: 8,
    paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
    flexDirection: 'row',
  }}
  ref={ref => AlertHelper.setDropDown(ref)}
  onClose={() => AlertHelper.invokeOnClose()}
  // show error image even when offline because of this issue: https://github.com/testshallpass/react-native-dropdownalert/issues/189
  errorImageSrc={{
    uri:
      'data:image/png;base64,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',
  }}
/>

[EyMaddis]

It should work as you described because the warn image is a local source. Please post how you rendered DropDownAlert component. I suspect it is overwritten, please double check this as well.

Does this also apply to production builds? This might only happen in development because in that case the images are loaded via the network (the metro bundler).

[reinink]

Does this also apply to production builds?

I can confirm that this only happens in development. I've tested in production, and they work. 👍

[KonstantinKostianytsia]

There was the same problem on the project. The solution was to update RN 0.61 to version 0.63.3 with RNDropdownalert 4.2.1

[testshallpass]

Closing as it was confirmed only happens in development so will not fix.