🕌

React NativeのModalからModalを表示する

2024/02/09に公開

React Native のModalからさらにもう一つModalを表示させることをしたいときどうするか
こういうやつをやりたい

結論

Modalの中に呼び出したいModalを入れ込む

import React, { useState } from 'react';
import { Modal, View, Text } from 'react-native';


const ModalInModal = (): JSX.Element => {
  const [firstModalVisible, setFirstModalVisible] = useState(false);
  const [secondModalVisible, setSecondModalVisible] = useState(false);

  return (
    {/* 最初に呼び出されるmodal */}
    <Modal
      animationType={'slide'}
      visible={firstModalVisible}
      presentationStyle={'pageSheet'}
    >
      {/* modalの中から呼び出されるmodal */}
      <Modal
        animationType={'slide'}
        visible={secondModalVisible}
        presentationStyle={'pageSheet'}
      >
        <View>
          <Text>modalの中から呼び出されるモーダル(second modal)</Text>
        </View>
      </Modal>
      <View>
        <Text>最初に呼び出されるモーダル(first modal)</Text>
      </View>
    </Modal>
  );
}

参考

https://github.com/react-native-modal/react-native-modal/issues/30#issuecomment-1672959064

GitHubで編集を提案

Discussion