I have modal which I have declared as custom component.

in which I have two button one is action and another is skip. on pressing action button action function should call and on press skip button skip function should call.

  <ModalComp
        title="Push Notifications"
        title1="Based on your address, your refuse is collected by Veolia for City of Lincoln Council."
        title2="Action"
        title3="Skip for now"
        modalVisible={modalVisible}
        onPress={() => func1()}
      />

here is my modal code

 <Modal
      animationType="slide"
      transparent={true}
      visible={props.modalVisible}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
        this.setModalVisible(!props.modalVisible);
      }}
    >
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <View>
            <Text style={styles.modalText}>{props.title}</Text>
          </View>
          <View>
            <Text style={[styles.view1Text, { fontSize: 15 }]}>
              {props.title1}
            </Text>
            <TouchableOpacity {...props}>
              <Text style={[styles.view1Text, { fontSize: 15 }]}>
                {props.title2}
              </Text>
            </TouchableOpacity>
            <PrimaryButton
            //       onPress={() => navigation.navigate("BottomTabNavigation")}
            {...props}
            title="Action"
          />
          </View>
          <TouchableOpacity
            style={[
              styles.authScreensEndButton,
              {
                width: widthPercentageToDP("70%"),
                paddingBottom: "5%",
                backgroundColor: "green",
              },
            ]}
            //  onPress={() => this.fromChangePassword()}
            {...props}
          >
            <Text style={styles.textStyle}>{props.title3}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>

CodePudding user response：

Try this

<ModalComp
        title="Push Notifications"
        title1="Based on your address, your refuse is collected by Veolia for City of             Lincoln Council."
        title2="Action"
        title3="Skip for now"
        modalVisible={modalVisible}
        onActionPress={() => func1()}
        onSkipPress={() => func2()}
      />

And call onActionPress, onSkipPress in the modal code whenever required

CodePudding user response：

You can try this

    <Modal
          animationType="slide"
          transparent={true}
          visible={props.modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
            this.setModalVisible(!props.modalVisible);
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <View>
                <Text style={styles.modalText}>{props.title}</Text>
              </View>
              <View>
                <Text style={[styles.view1Text, { fontSize: 15 }]}>
                  {props.title1}
                </Text>
                <TouchableOpacity {...props}>
                  <Text style={[styles.view1Text, { fontSize: 15 }]}>
                    {props.title2}
                  </Text>
                </TouchableOpacity>
                <PrimaryButton
                {props.onAction} // for action onPress
                title="Action"
              />
              </View>
              <TouchableOpacity
                style={[
                  styles.authScreensEndButton,
                  {
                    width: widthPercentageToDP("70%"),
                    paddingBottom: "5%",
                    backgroundColor: "green",
                  },
                ]}
                {props.onSkip} // for skip onPress
              >
                <Text style={styles.textStyle}>{props.title3}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>

then

    <ModalComp
            title="Push Notifications"
            title1="Based on your address, your refuse is collected by Veolia for City of             Lincoln Council."
            title2="Action"
            title3="Skip for now"
            modalVisible={modalVisible}
            onAction={() => func1()} // for action onPress
            onSkip={() => func2()} // for skip onPress
          />