React Native Alert crash(error) Delete conformation

Question

I'm trying to set alert function before running delete function to confirm.

Here is my code. Now this shows alert popup with title, explanation and two buttons as I expected.

However, after showing up alert, the machine stopped for about one minute. I can not press anything.

After that, I can press both buttons, but nothing happens - neither console.log nor delete function.

How can I fix this? thanks

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import CircleButton from '../elements/CircleButton';


  handlePress() {
const { currentUser } = firebase.auth();
const db = firebase.firestore();
db.collection(`users/${currentUser.uid}/friends`).doc(this.state.key).delete()
  .then(() => {
    console.log('Deleted');
    this.props.navigation.goBack();
  })
  .catch((error) => {
    console.log(error);
  });
  }

...

    <CircleButton
      style={styles.funcButton}
      onPress={()=>{
        Alert.alert(
          'Are you sure to delete?',
          'never recover',
          [
            {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            {text: 'Delete', onPress: () => this.handlePress.bind(this), style: 'destructive'},
          ],
          { cancelable: false }
        )
      }}>
      {'\uf1f8'}
    </CircleButton>

`onPress: () => this.handlePress.bind(this)` should be either `onPress: () => this.handlePress()` or just `onPress: this.handlePress.bind(this)` — bennygenel, May 13 '18 at 12:23

score 0 · Answer 1 · answered May 13 '18 at 13:44

0

Change

{text: 'Delete', onPress: () => this.handlePress.bind(this), style: 'destructive'},

to

{text: 'Delete', onPress: this.handlePress, style: 'destructive'},

Because

arrow functions don’t bind this.

answered May 13 '18 at 13:44

FaiChou

767
7
16

React Native Alert crash(error) Delete conformation

1 Answers1