React Native Modalで選択した値を表示させる

はじめに

React NativeのModal機能を使った際に、ポップアップした画面で何かしらを選択し、選択した値をもとの画面で表示させる方法を紹介します。

Modal準備

Modalでいくつかのアイコンを表示させ選択したかったので、今回はMaterialIconsを使用しました。
下のMaterialIconsのiconNameに選択したfastfoodが入れば成功です。

  const [modalVisible, setModalVisible] = useState(false);

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <TouchableOpacity
            onPress={() =>{}}
        >
        <MaterialIcons name="fastfood" size={24} color="black" />
      </Modal>

      <TouchableOpacity
        onPress={() => setModalVisible(!modalVisible)}
       >
       <MaterialIcons name={iconName} size={24} color="white" />
       </TouchableOpacity>

解決策

  const [modalVisible, setModalVisible] = useState(false);
  const [iconName, setIconName] = useState('');

  function selectFoodIcon() {
        setModalVisible(!modalVisible);
        setIconName('fastfood');
    };

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <TouchableOpacity
            onPress={() =>{
            selectFoodIcon() //←ここに関数を入れる
            }}
        >
        <MaterialIcons name="fastfood" size={24} color="black" />
      </Modal>

      <TouchableOpacity
        onPress={() => setModalVisible(!modalVisible)}
       >
       <MaterialIcons name={iconName} size={24} color="white" />
       </TouchableOpacity>

これでModalで選択した値を取得することができたと思います。