navigate to other screen from alert message

[aadeshb7]

hey. im new to react native and im building an application which will authenticate the user using the fingerprint and will navigate if successful to next screen through the button displayed on alert message. but im not able to do so.
here is the code snippet of the particular screen:-

`import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ImageBackground, Alert } from 'react-native';
import TouchID from 'react-native-touch-id';

export default class FingerPrintScreen extends React.Component {
render() {
return (
<ImageBackground style={{ flex: 1, width: null, height: null, resizeMode: 'cover'}} source={{ uri: 'https://jooinn.com/images/white-clouds-25.jpg' }}>

<Text style={{ textAlign: 'center', top: '10%', fontFamily: 'Arial', fontSize: 30, color: '#0143B8', fontWeight: 'bold'}}>Authenticate using Fingerprint.
<TouchableOpacity activeOpacity={0.55} style={ stylesLogin.HomeButton } onPress={() => this.props.navigation.popToTop('Home')}>
<Text style={{ textAlign:'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold'}}>Go to Home


<Text style={{ textAlign: 'center', fontFamily: 'Arial', fontSize: 30, color: '#FFFFFF', fontWeight: 'bold' }}>Click Here to Authenticate using Fingerprint



);
}
clickHandler() {
TouchID.isSupported()
.then( authenticate() )
.catch( error => {
Alert.alert( 'Biometric not supported' )
})
}
}

function authenticate() {
return TouchID.authenticate()
.then( success => {
Alert.alert('Authenticated Successfully','', [{text: 'Proceed', onPress:() => this.props.navigation.navigate('Main')}] )
})
.catch(error => {
Alert.alert(error.message);
})
}`

im not able to do so because the authenticate function is located outside the component .
Thank You