React Nativeで複数のモーダルを多重表示してみた。

実装方法として特別なことをする必要はなく、下記コードのようにすれば、モダールを多重表示することができる。

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

export default function App() {
  const [ visible1, setVisible1 ] = useState(false)
  const [ visible2, setVisible2 ] = useState(false)

  return (
    <View style={styles.container}>
      <Modal
      visible={visible1}
      presentationStyle='pageSheet'
      animationType='slide'
      >
        <Text>hello11111</Text>
        <Button title='close' onPress={()=>{setVisible1(false)}}/>
        <Button title='open modal2' onPress={()=>{setVisible2(true)}}/>

        <Modal
        visible={visible2}
        presentationStyle='pageSheet'
        animationType='slide'
        >
          <Text>hello22222</Text>
          <Button title='close' onPress={()=>{setVisible2(false)}}/>
        </Modal>
        
      </Modal>
      <Button title='open modal1' onPress={()=>{setVisible1(true)}}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ただし、ハマったことが１つあったのでそれだけ紹介します…

モーダルを多重表示するときはモーダルの中にモダールを表示しましょう。
下のコードみたいにモーダルを並列？にして書くと、うまく動作しないので気をつけましょう！
考えれば当たり前かもしれませんが、私は数時間ハマりました…

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

export default function App() {
  const [ visible1, setVisible1 ] = useState(false)
  const [ visible2, setVisible2 ] = useState(false)

  return (
    <View style={styles.container}>
      <Modal
      visible={visible1}
      presentationStyle='pageSheet'
      animationType='slide'
      >
        <Text>hello11111</Text>
        <Button title='close' onPress={()=>{setVisible1(false)}}/>
        <Button title='open modal2' onPress={()=>{setVisible2(true)}}/>
      </Modal>
      <Modal
        visible={visible2}
        presentationStyle='pageSheet'
        animationType='slide'
        >
          <Text>hello22222</Text>
          <Button title='close' onPress={()=>{setVisible2(false)}}/>
      </Modal>      
      <Button title='open modal1' onPress={()=>{setVisible1(true)}}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

コメント