React Nativeのプロジェクトでデフォルトのダイアログを表示させる

iOS のアプリでよく見る、最も標準的なダイアログを表示させる手順を紹介します。使い方はそれほど難しくなく、公式ドキュメントの通りに素直に使えばよさそうです。

react-native-dialog をインストールする

shell

npm i react-native-dialog

react-native-dialog を使って、以下のようなダイアログを表示します。

ダイアログのコンポーネントを作成する

TabNameInputDialog.tsx

import { updateTabNameById } from '../../databases/repositories/tabRepository';
import { ReloadTabState } from '../../states/atoms/ReloadTabState';
import React, { useState } from 'react';
import Dialog from 'react-native-dialog';
import 'react-native-get-random-values';
import { useSetRecoilState } from 'recoil';
import { v4 as uuidv4 } from 'uuid';

interface TabNameInputDialogProps {
  tabId: string;
  defaultTabName: string;
  visible: boolean;
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

export default function TabNameInputDialog({
  tabId,
  defaultTabName,
  visible,
  setVisible,
}: TabNameInputDialogProps) {
  const [newTabName, setNewTabName] = useState(defaultTabName);

  const setReloadTabState = useSetRecoilState(ReloadTabState);
  const onCancel = () => {
    setVisible(false);
  };
  const onSubmit = async () => {
    await updateTabNameById(tabId, newTabName);
    setReloadTabState(uuidv4());
    setVisible(false);
  };
  return (
    <Dialog.Container visible={visible}>
      <Dialog.Title>Rename the tab</Dialog.Title>
      <Dialog.Input onChangeText={setNewTabName} value={newTabName} />
      <Dialog.Button label="Cancel" onPress={onCancel} />
      <Dialog.Button label="Submit" onPress={onSubmit} />
    </Dialog.Container>
  );
}

ダイアログを表示させる

以下のように、上で作成した TabNameInputDialog のコンポーネントに setVisible を渡せばOKです。

DisplayDialog.tsx

const [editDialogVisible, setEditDialogVisible] = useState(false);
  return (        
    <TabNameInputDialog
          tabId={item.id}
          visible={editDialogVisible}
          setVisible={setEditDialogVisible}
          defaultTabName={item.name}
        />
)

setVisible が true になったタイミングでダイアログが表示されます。