[React Native] トースト通知するライブラリ「react-native-tiny-toast」の紹介

ユーザーの操作に応じて状態を知らせる機構に「トースト通知」というものがある。ローディング中であることを伝えたり通信の成否を伝えたり、ポップアップ表示することでユーザーの迷子を防ぐことに寄与するものだ。

とくにネットワーク制限やデバイスのスペックに影響を受けやすいアプリケーションにおいては、必須要素のひとつと認識されるもので、RNアプリ開発でも例外ではない。

それこそ各種UIコンポーネントには、かならずトースト通知UIが用意されているわけだが、それら実装ケースはそれほど多くなく感じる。

たとえばAmazonでカートに入れるボタンをタップしたとき、あるいはSlackのメッセージ内の画像をコピー・保存したときに現れるトースト通知は、よく思い出してもらえるのではないだろうか。

このエントリーでは、オーバーレイ式にポップアップ表示されるトースト通知「react-native-tiny-toast」を紹介したい。

react-native-tiny-toast について

react-native-tiny-toastは、React Nativeアプリに実装するトースト通知コンポーネントだ。AmazonやSlackの操作時にみられるトーストUIに酷似している。

https://github.com/shx996/react-native-tiny-toast

特徴

  • iOSとAndroidで動作サポート
  • アイコン、スタイルのカスタム可
  • ローディングアイコンはRNのActivityIndicatorを使用

インストール

$ npm i react-native-tiny-toast --save
# or
$ yarn add react-native-tiny-toast

設置

import Toast from 'react-native-tiny-toast';

設定

Props

namedefaulttypehint
containerStylenullObject梱包要素のスタイル定義
durationToast.durations.SHORTNumber期間
delay0Number表示開始までの遅延時間
animationDuration200Numberアニメーション期間
visiblefalseBooleanトースト表示の正偽
positionToast.position.bottomNumberトーストの表示位置
animationtrueBooleanフェードアニメーションの正偽
shadowfalseBoolean影の正偽
shadowColor#000String影の色
showTexttrueBooleanテキスト表示の正偽
textColor#fffStringテキストの色
textStylenullObjectテキストのスタイル定義
maskfalseBooleanマスクの正偽
maskColorrgba(0,0,0,0.3)Stringマスクの色
maskStylenullObjectマスクのスタイル定義
imgSourcenullString画像パス
imgStylenullObject画像のスタイル定義
loadingfalseBooleanローディング表示の正偽
indicatorSizelargeString or Numberローディングアイコンのサイズ
onHiddennullFunction非表示時のトリガー
onMaskPressnullFunctionマスククリック時のトリガー

Method

nametypehint
show(text, options)Functionトーストを表示
showSuccess(text, options)Function成功アイコンのトーストを表示
showLoading(text, options)Functionローディングのトーストを表示
hide(toast)Functionトーストを非表示

デモンストレーション

import React, {Component} from 'react-native'
import Toast from 'react-native-tiny-toast'

class Example extends Component {
    state={
      visible: false
    }
    
    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 1000); 

        setTimeout(() => this.setState({
            visible: false
        }), 3000);
    };

    render() {
        return 
        <Toast
            visible={this.state.visible}
            position={50}
            onHidden={()=>{
              // onHidden
            }}>This is a message
        </Toast>
    }
}

まとめ

React Nativeのトースト通知ライブラリ「react-native-tiny-toast」の紹介だった。

propsのmask属性を加えると、スクリーン全体を覆うオーバーレイ仕様になる。このときスクリーン内のコンテンツに対して、タップやスワイプ等の操作ができない状態になるため、操作を制限したいときに最適だろう。

しかし非同期処理に関わるところで、オーバーレイ仕様にするのは注意が必要だ。処理完了まで待機を強いられたら、それこそユーザー体験を損ないかねない。もし操作を制限させたいのならば、最小限のコンテンツをActivityIndicatorコンポーネント等と差し替えるような作りを検討してみてはどうだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。