[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

Method

デモンストレーション

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

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