LogOutモーダルを実装

[Shiraishi-Shodai]

ログアウトの流れ

1. LoginIcon.tsxでアイコン画像をクリックしたときに、ログアウトのモーダルが表示される(背景をクリックすると、モーダルを下げる)
2. LoginIcon.tsxでは子コンポーネントにLogoutButton.tsxを持つ
3. LogoutButton.tsxで実装されたログアウトボタンを押すと、ログアウトする
4. AuthProvider.tsxの以下のコードを実行し、Context APIで管理しているuserをnullに更新 const onAuthStateChanged = (user: FirebaseAuthTypes.User | null) => { setUser(user); };
5. auth().onAuthStateChanged(onAuthStateChanged);が実行される
6. RootLayoutから再レンダリングが発生
7. app/(tabs)/index.tsxでContext APIのuserがnullであることをチェックし、login.tsxにリダイレクトする
8. Googleのログイン画面が表示される

[Shiraishi-Shodai]

Modalとは？

公式ドキュメントより

モーダルコンポーネントは、ビューの上にコンテンツを表示する基本的な方法です。