how to disable the button in react native on acknowledgement from webservice in reactnative

user_15963088 0
Viewed 41

i have a situation as below, on reciveing that the acknowledgement was successful in sendacknowledgement function i want to disable the button any ideas pls help....//in the code in ack response: was success then disable//or if it enters gotourl() then disable

function gotourl() {
    console.log("url===> ", url);

    if (url != null) {
        console.log("url===> ", url);
        Linking.openURL(url);
    }
    acknowledgement = JSON.stringify({
        ack: {
            UserId: userid,
            EventId: messageid,
            EventName: event,
            EventStatus: "Accepted",
        },
    });
    sendack();
}

const deleteItem = (index) => {
    acknowledgement = JSON.stringify({
        ack: {
            UserId: userid,
            EventId: messageid,
            EventName: event,
            EventStatus: "Rejected",
        },
    });
    sendack();
};

function sendack() {
    fetch("url")
        .then((response) => response.json())
        .then((data) => {
            sendacknowledgement(data);
        });
}

function sendacknowledgement(beatoken) {
    console.log("inside send ack token ====>>>>", beatoken);
    console.log("acknowledgement===>", acknowledgement);

    fetch("url", {
        method: "PUT",
        withCredentials: true,
        credentials: "include",
        headers: {
            Authorization: "Bearer " + beatoken,
            "Content-Type": "application/json",
        },

        body: acknowledgement,
    })
        .then((response) => response.json())
        .then((data) => console.log("ACK Response: ", data))
        .catch((err) =>
            console.log("ERROR DURING SENDING ACKNOWLEDGEMENT ===> ", err)
        );
}

return (
    <View style={styles.container}>
        {view.length <= 3 ? (
            <>
                <Text style={styles.heading}>NO NEW MESSAGES</Text>
            </>
        ) : (
            <>
                <Text style={styles.textStyle}>{data}</Text>
                <Button
                    onPress={() => gotourl()}
                    title="Accept"
                    color="green"
                />
                <Button
                    onPress={() => deleteItem()}
                    title="Delete"
                    color="red"
                />
            </>
        )}
    </View>
);
};
react-native reactjs
1 Answers

to achieve you task declare a new state to disable dinamically the button

const [isDisable, setIsDisable] = React.useState(false)

When your webservice finish to fetch and is successfull update the state of isDisabled to true

.then((data) => {
  console.log("ACK Response: ", data)
  setIsDisabled(true)
})

In the end use the React native props disabled and pass your state

<Button
         onPress={() => gotourl()}
         title="Accept"
         color="green"
         disabled={isDisable}                 
                />

to this logic where you need it

user_155473350
Related