How to close or dismiss alert box in react native...?

Question

I wanna add an alert box in my react native app on delete action I need to confirm if the user clicks on Ok then the record will be deleted if the user clicks on cancel button then alert should be close or dismiss. how may I do it.?

Alert.alert(
  'Alert Title',
  'My Alert Msg',
  [
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
    },
    {
      text: 'OK', 
      onPress: () => console.log('OK Pressed')
    },
  ],
  {cancelable: false},
);

Sulfatize

The alert is automatically closed when the user presses any of the buttons. – Polygamy

but I want to close alert on Press the cancel button – Sulfatize

The alert is closed when the user presses the cancel button. That is the default behavior. You don't need to do anything special for that. – Polygamy

Answer 1

if you not given any function call on cancel button it will work as dismiss for alert

Angle

Answer 2

Just remove the {cancelable: false} part. If you want to add some logic on button clicks you can modify the onPress method like:

onPress: () => {
//your logic
}

EDIT.

No you cannot close the alert programmatically. You have to either create a modal that acts like an alert and use the visible prop, or use a third party component.

Salol

please read my question I said how to close or dismiss the alert box. – Sulfatize

It wasn't me who downvoted your question. I dont understand what your problem is then. You cannot display it? – Salol

dear, I want to close my alert box with custom code. do you have another solution.? – Sulfatize

@AdeelAhmed have you found any solution? How can we close the alert box programmatically or from out side the alert box? – Lumberjack

Answer 3

  const showAlert = (index, photos) =>
  Alert.alert(
    "Wait !!!",
    "Are you sure you want to delete",
    [
      {
        text: "Cancel",
        style: "cancel",
      },
      {
        text: "Ok",
        onPress: () => onActionDeleteDone(index, photos,),
        // style: "cancel",
      },
    ],
    {
      cancelable: true,
    }
  );

const App = () => (
   <View style={styles.container}>
    <Button title="Show alert" onPress={showAlert} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default App;

Giule

Answer 4

Late to the party

Alert.alert(
      'Title',
      `Description`,
      [
        {
          text: 'Cancel',
        },
        {
          text: 'Enable',
          onPress: () => Linking.openSettings(),
        },
      ],
      {cancelable: false},
    );

Just add the cancel text and don't pass any onPress. It'll dismiss the modal unless you want to perform some operations.

If cancelable is set true. Then user will be able to dismiss the alert box when he/she clicks on overlay part.

Dunedin