Снэк-бар не отображается, когда интернет-соединение переключено с ON на OFF

Question

Я использовал библиотеку NetInfo, чтобы определить, доступно ли интернет-соединение. Он работает отлично, но снэк-бар внутри функции NetInfo не отображается при переключении интернета с включенного на выключенное. Снэк-бар отлично отображается при запуске без интернета, а также при запуске с интернетом. Когда Интернет меняется с выключенного на включенное каждый раз, снэк-бар отображается каждый раз, НО не отображается при переключении с ВКЛ на ВЫКЛ. Все логи отлично показывают в любых условиях. Если я поставлю оповещение вместо закусочной, все будет отлично.

handleConnectivityChange = (isConnected) => {

  NetInfo.isConnected.fetch().done((isConnected) => {

    console.log('Dashboard ConnectivityChanged');

    console.log('IsConnectedValue:'+ isConnected );

    if(isConnected == true)
    {
        console.log('Dashboard Connected');

        Snackbar.show({
          title: 'Connected to Internet',
          duration: Snackbar.LENGTH_LONG,
          action: {
            title: 'DISMISS',
            color: 'rgb(216,21,88)',
            onPress: () => { /* Dismiss snackbar default */ },
          },
        });
    }
    else
    {
        console.log('Dashboard No Internet');

        Snackbar.show({
          title: 'No Internet Connection',
          duration: Snackbar.LENGTH_LONG,
          action: {
            title: 'DISMISS',
            color: 'rgb(216,21,88)',
            onPress: () => { /* Dismiss snackbar default */ },
          },
        });
    }
  });
}

Answer 1

У меня была похожая проблема. Я не уверен, что является причиной этого, но, как временное исправление, обертывание его внутри setTimeout, кажется, делает работу, т.е.

setTimeout(() => {
  Snackbar.show({
      title: 'Connected to Internet',
      duration: Snackbar.LENGTH_LONG,
      action: {
        title: 'DISMISS',
        color: 'rgb(216,21,88)',
        onPress: () => { /* Dismiss snackbar default */ },
      },
    });
}, 1000);

Кроме того, чтобы предотвратить импорт Snackbar во всех приложениях и возможность повторного использования кода, рассмотрите возможность помещения Snackbar.show() в отдельную функцию.

В настоящее время у меня есть это в utils.js, который я вызываю во всем моем приложении:

export const showSnackbar = ({ title, duration = Snackbar.LENGTH_SHORT, action }) => {
  Snackbar.dismiss(); // dismiss if a snackbar is still "alive"
  if (!action) {
    Snackbar.show({
        title: message,
        duration,
    });
  } else {
    Snackbar.show({
        title,
        duration,
        action
    });
  }
};

Обратите внимание, что в начале я отклоняю ранее показанную снэк-бар, если она все еще на экране. Надеюсь это поможет:)