React Native multiple modals on one page question

Question

I have got 6 different buttons on one page that each need to open a modal window. Now I don't want to write out 6 different modals. So when the user presses the first button it will pull up a modal with the reported info on the "shopping info", whereas on the second button it would bring up the info on "graphical info".

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

    <TouchableOpacity style={styles.expensesList} onPress={() => {setModalVisible(true)}}>
      <FontAwesome5 name="shopping-cart" size={40} color="black" style={styles.iconStyle} />
    </TouchableOpacity>

    <TouchableOpacity style={styles.expensesList} onPress={}> {/* Different modal? */}
      <Foundation name="graph-bar" size={40} color="black" />
    </TouchableOpacity>

<Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    style={{ margin: 0 }}
    onRequestClose={() => {}}>

// Different info based on which button was pressed

</Modal>

These are for reporting purposes so each one will have the same styling and close button. But I want to be able to only have one modal that opens different ones dependent on which button was pressed. Is this doable?

If I am not clear enough please let me know. I am new to React Native.

EDIT - I am NOT trying to open multiple modals at once. Only one will be open at a time. But I want to be able to change the info in the ONE modal, dependent on which button was clicked.

Answer 1

you can add a state that will take care of the action triggered and then based on this state you can change the content of the modal, see an example and let me know if it's well suited for your case:

const [actionTriggered, setActionTriggered] = useState(''); // here we go

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

   <>
      <TouchableOpacity style={styles.expensesList} onPress={() => {
        setModalVisible(true);
        setActionTriggered('ACTION_1'); // HERE
      }}>
        <FontAwesome5 name="shopping-cart" size={40} color="black" style={styles.iconStyle} />
      </TouchableOpacity>

      <TouchableOpacity style={styles.expensesList} onPress={() => {
        setActionTriggered('ACTION_2'); // HERE
      }}> {/* Different modal? */}
        <Foundation name="graph-bar" size={40} color="black" />
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        style={{ margin: 0 }}
        onRequestClose={() => { }}>

        {/* inside the modal view, depending on the action type do something */}
        {actionTriggered === 'ACTION_1' ?
          <View>
            {/* .... something you want to show in case of the first modal opened  */}
          </View> :
          actionTriggered === 'ACTION_2' ?
            <View>
              {/* // .... something you want to show in case of the second modal opened  */}
            </View> :
            null}
      </Modal>
   </>