【ReactNative】送信中のクルクルを出す

スピナーっていうんでしょうか。砂時計っていうんでしょうか。 名前が分かりませんが、通信中であることを示すためグルグル回るものを出します。 ReactNativeにはActivityIndicatorが用意されているようでした。 ただ画面の上からオーバーレイをして出したいと思うので下記を利用しました。

github.com

トップレベルにSpinnerタグを追加して、stateにオンオフをする変数を追加するだけで簡単に利用できます。 注意点としては、オフにした直後のアクションはsetTimeoutとかで間を空けてやらないといけないようです。 そのままalertを置くとalertが勝手に消えてしまいました。

setSpinner(true);
const { error } = await something
setSpinner(false);

// スピナー終了直後は少し間を空けないとうまく行かない
setTimeout(() => {
  if (!error) {
    alert('エラーが発生しました');
  }
}, 100);