React Native で Toast Message（スナックメッセージ）を表示させる手順

react-native-toast-message で React Native の画面上にトーストメッセージを表示する手順を紹介します。

ちなみに、React Native Paper にも Snackbar というコンポーネントがあります。
Snackbar

どちらも似たような効果がありますが、個人的には react-native-toast-message の見た目が好きなので、この記事では react-native-toast-message を使ってみます。

ライブラリをインストール

shell

npm i react-native-toast-message

使い方は公式ドキュメントが一番わかりやすいです。

参考

https://github.com/calintamas/react-native-toast-message/blob/main/docs/quick-start.md

react-native-toast-message の使い方

以下の画面で、 Add a tab をタップして、タブの登録ができたらトーストを出すようにします。

View の下の方に <Toast /> を配置します。

TopTabAddScreen.tsx

import useTab from '../../hooks/useTab';
import { Pressable, SafeAreaView, StyleSheet, Text, TextInput } from 'react-native';
import Toast from 'react-native-toast-message';

export default function TopTabAddScreen() {
  const { newTabName, setNewTabName, onAddTab } = useTab();
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Add a tab</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter a tab name"
        onChangeText={setNewTabName}
        value={newTabName}
      />
      <Pressable style={styles.button} onPress={onAddTab}>
        <Text style={styles.buttonText}>Add a tab</Text>
      </Pressable>
      <Toast position={'bottom'} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    textAlign: 'center',
    alignItems: 'center',
    backgroundColor: '#fafafa',
  },
  title: {
    marginVertical: 16,
    textAlign: 'center',
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  input: {
    borderColor: '#888787',
    borderWidth: 1,
    display: 'flex',
    borderRadius: 22,
    width: '90%',
    paddingVertical: 16,
    paddingHorizontal: 18,
  },
  button: {
    marginTop: 16,
    backgroundColor: '#2962ff',
    borderRadius: 22,
    paddingVertical: 16,
    paddingHorizontal: 18,
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 18,
    paddingHorizontal: 18,
  },
});

position={'bottom'} とすると、下の方にトーストが表示されます。 position を指定しない場合は上の方に出てきます。

Toast を表示させる方の処理は以下です。

useTab.ts

import { useState } from 'react';
import { Alert } from 'react-native';
import Toast from 'react-native-toast-message';

export default function useTab() {
  const [newTabName, setNewTabName] = useState('');

  const onAddTab = () => {
    if (newTabName === '') {
      Alert.alert('Please enter a tab name');
      return;
    }
    console.log('add tab', newTabName);
    // ここでデータベースにタブを登録する処理を書く

    Toast.show({
      type: 'success',
      text1: `Tab registered`,
      text2: `The name of the tab is ${newTabName} 🙌`,
    });
    setNewTabName('');
  };
  return {
    newTabName,
    setNewTabName,
    onAddTab,
  };
}

実際の動作は以下のようになります。