Home > Software engineering >  react native remove item from flatlist with confirmation in alert
react native remove item from flatlist with confirmation in alert

Time:12-28

i'm trying to remove an item from flatlist but before remove it there is an alert to ask "are you sure to remove it".

but i couldn't sure how to do it.

this is alert

<AwesomeAlert
        show={showAlert}
        title="UYARI!"
        message="Are you sure to remove it?"
        closeOnTouchOutside={false}
        closeOnHardwareBackPress={false}
        showCancelButton={true}
        showConfirmButton={true}
        cancelText="Hayır"
        confirmText="Evet"
        confirmButtonColor="#DD5555"
        onCancelPressed={() => {
          setShowAlert(false);
        }}
        onConfirmPressed={() => {
          //what should i do here ? 
          setShowAlert(false);
        }}
      />

this is flatlist render item

const barcodeList = barcodeArray => {
    return (
      <View style={styles.ListItemContainer}>
        <Text>-{barcodeArray.item}</Text>
        <TouchableOpacity onPress={() => removeItem(barcodeArray.item)}> 
                                //this removeItem func is remove it without confirmation
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>X</Text>
        </TouchableOpacity>
      </View>
    );
  };

CodePudding user response:

based on the item passed to removeItem function you can filter out the value and then set state.

eg

let filter_elements = item.filter(
item => item.id!= barcodeArray.item.id
);
setState(filter_elements)

CodePudding user response:

Actually your alert component should return a promise.

Something like that:

const removeItem = id => {
    alert("Are you sure?").then(if(value === "Yes") => {
        // do some stuff here

        
    })
}

You can write a async alert.

Can React native Alert wait for user response?

  • Related