'Modal isn't showing when visible is true

I want to have a modal on top of another modal. For some reason when the modals visible parameter is set to true it doesn't show on top of the current modal. How do I fix a component being hidden under the modal? Here is my code

This is the bottom Modal code

const [popUp, setPopup] = useState(true);

 <Modal
        presentationStyle="pageSheet"
        style={{ margin: 0 }}
        animationType="slide"
        visible={settingsModalVis}
      >
        <View style={styles.centeredView}>
          <View
            style={{
              flex: 0.5,
              justifyContent: "center",
              alignItems: "center",
              // backgroundColor: "blue",
            }}
          >
            <Text style={styles.text}>
              Current Choice:
            </Text>
            <Text> {"   "} </Text>
            <Text style={styles.text}>
              {capitalize(choices)}
            </Text>
          </View>

          <View
            style={{
              flex: 0.3,
              justifyContent: "flex-start",
              alignItems: "center",
              // backgroundColor: "green",
            }}
          >
            <LinearGradient
              colors={[
                "#F7BBB2",
                "#FFC9B5",
                "#FFDDC7",
                "#FFF6D4",
                "#FFFDF2",
              ]}
              style={{ borderRadius: 20 }}
              start={{ x: 1, y: 0 }}
              end={{ x: 0, y: 0 }}
            >
              <TouchableOpacity
                style={styles.btnContainer}
                onPress={() => {
                  choiceChange();
                }}
              >
                <Text
                  style={{
                    color: "black",
                    textAlign: "center",
                    fontSize: 22,
                    fontFamily: "playfairItalict",
                  }}
                >
                  Switch Choice
                </Text>
              </TouchableOpacity>
            </LinearGradient>
          </View>

The Modal I want to appear on top when true

<Modal
        animationType="slide"
        transparent={true}
        visible={popUp}
        //style={{ overlay: { zIndex: 1000 } }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>
              Settings Changed!
            </Text>
            <LinearGradient
              colors={[
                "#F7BBB2",
                "#FFC9B5",
                "#FFDDC7",
                "#FFF6D4",
                "#FFFDF2",
              ]}
              style={{ borderRadius: 20 }}
              start={{ x: 1, y: 0 }}
              end={{ x: 0, y: 0 }}
            >
              <TouchableOpacity
                style={styles.btnContainer}
                onPress={() => {
                  setPopup(!popUp);
                }}
              >
                <Text
                  style={{
                    color: "black",
                    textAlign: "center",
                    fontSize: 22,
                    fontFamily: "playfairItalict",
                  }}
                >
                  Dismiss
                </Text>
              </TouchableOpacity>
            </LinearGradient>
          </View>
        </View>
      </Modal>

I tried making the ZIndex but it didnt work. Any ideas?

react-nativemodal-dialogexpo


Solution 1:[1]

This is a "hack" :

[...]
<Modal
        presentationStyle="pageSheet"
        style={{ margin: 0 }}
        animationType="slide"
        visible={settingsModalVis && !popUp}
      >
[...]

Disappear the Bottom modal when the modal you want appear on Top :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user18976271

Related Questions