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

とくにネットワーク制限やデバイスのスペックに影響を受けやすいアプリケーションにおいては、必須要素のひとつと認識されるもので、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

name	default	type	hint
containerStyle	null	Object	梱包要素のスタイル定義
duration	Toast.durations.SHORT	Number	期間
delay	0	Number	表示開始までの遅延時間
animationDuration	200	Number	アニメーション期間
visible	false	Boolean	トースト表示の正偽
position	Toast.position.bottom	Number	トーストの表示位置
animation	true	Boolean	フェードアニメーションの正偽
shadow	false	Boolean	影の正偽
shadowColor	#000	String	影の色
showText	true	Boolean	テキスト表示の正偽
textColor	#fff	String	テキストの色
textStyle	null	Object	テキストのスタイル定義
mask	false	Boolean	マスクの正偽
maskColor	rgba(0,0,0,0.3)	String	マスクの色
maskStyle	null	Object	マスクのスタイル定義
imgSource	null	String	画像パス
imgStyle	null	Object	画像のスタイル定義
loading	false	Boolean	ローディング表示の正偽
indicatorSize	large	String or Number	ローディングアイコンのサイズ
onHidden	null	Function	非表示時のトリガー
onMaskPress	null	Function	マスククリック時のトリガー

Method

name	type	hint
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コンポーネント等と差し替えるような作りを検討してみてはどうだろうか。

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