react-native-toast-messageを使ってみる

概要

3つのパターンを試したから、どんなデザインかを記録しておく

左の謎の線の色が変わるだけであるが

type	内容	デザイン
"success"	成功メッセージ	✅ 緑色・ポジティブ
"error"	エラーメッセージ	❌ 赤色・注意
"info"	情報メッセージ	ℹ️ 青色・中立

導入

install

npm install react-native-toast-message

added 1 package, and audited 1014 packages in 4s

177 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

配置

App.tsx

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

export default function App() {
  return (
    <AuthProvider>
      <AppStack />
      <Toast /> {/* ここにトーストを置く！ */}
    </AuthProvider>
  );
}

実際に使っていく

成功メッセージ

hoge.tsx

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

Toast.show({
  type: 'success',
  text1: 'エラーだよ🥺',
  text2: 'メールとパスワードを入力してね',
});

エラーメッセージ

hoge.tsx

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

Toast.show({
  type: 'error',
  text1: 'エラーだよ🥺',
  text2: 'メールとパスワードを入力してね',
});

情報メッセージ

hoge.tsx

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

Toast.show({
  type: 'info',
  text1: 'エラーだよ🥺',
  text2: 'メールとパスワードを入力してね',
});