CODEWITHSUNDEEP
react-nativereact-navigation
Tanmoy Sarker
Tanmoy Sarker

Reputation: 1266

React native navigate of undefined while showing unhandled promise rejection

I have a button component in a react native app where i am using onPress and calling a function. I want the function to be executed and after the execution i want to navigate to a new page. But when i'm trying to do so, it shows unhandled promise rejection and Cannot read property 'navigate' of undefined. Here's the function i'm calling from the button: 

acceptAction = async (id) => {
    await this.refaccept.doc(id + '').get().then(doc => {
      if (!doc.exists) {
        this.ref.doc(id + '').get().then(doc => {
          const jobData1 = doc.data()
          this.refaccept.doc(id + '').set({
            driverid: this.state.userId,
            address: jobData1.address,
            distance: jobData1.distance,
            pickupdate: jobData1.pickupdate,
            pickuptime: jobData1.pickuptime

          }).then(function () {
            console.log("Document successfully set!");
            
          }).catch(function (error) {
            console.error("Error setting document: ", error);
          });
        })
      } else {
        alert('This job is already taken')
      }
    })
   this.props.navigation.navigate('LocationTrack', {
      id: this.state.id,
    })
  }

 render() {
    const { id } = this.props
    return (
      <View style={{ width: '100%' }}>
        <View style={{ paddingTop: 10, paddingBottom: 10 }}>
          <TouchableOpacity>
            <Button onPress={() => this.acceptAction(id)}>
              <Text >Accept</Text>
            </Button>
          </TouchableOpacity>
          
        </View>
      </View>
    )
  }
}

Upvotes: 1

Views: 153

Answers (1)

Tanmoy Sarker
Tanmoy Sarker

Reputation: 1266

Okay, i don't know if it is the right way but withNavigation solved the issue.

Upvotes: 1

Related Questions