Unable to use the logout function within the Drawer Navigator - reactjs

Question

I am fairly new to react-native but I have been able to make a login with authentication using firebase. Alongside this, I have used a drawer for further navigation. However, when a user is logged in I want them to be able to logout via a button on that drawer. Currently, when I click it is it doing nothing...
I have tried changing to the this.logout function to this.logout() which reaches the console.log("here) statement but then returns an undefined error. I have also played around with the bindings but with no results.
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
authenticated: false,
}
this.logout = this.logout.bind(this)
};
componentDidMount() {
firebaseConfig.auth().onAuthStateChanged((authenticated) => {
authenticated ? this.setState(() => ({
authenticated: true,
})) : this.setState(() => ({
authenticated: false,
}));
});
}
//Logout of firebase and navigate to login screen
logout = () => {
console.log("here")
firebaseConfig.auth().signOut()
.then(() => this.props.navigation.navigate('Login'))
.catch((err) => {
console.log(err)
});
};
render() {
//const {currentUser} = this.state
return (
<Application/>
)
}
}
const DrawerComponents = (props) =>
<SafeAreaView style={styles.safeArea}>
<View style={styles.logo}>
</View>
<ScrollView>
<DrawerItems{...props}/>
<View style={{flex: 1}}>
<Button title="Logout" onPress={this.logout}/>
</View>
</ScrollView>
</SafeAreaView>
const TabNavigator = createDrawerNavigator({
Home: {screen: Homepage},
Profile: {screen: Profile},
Login: {
screen: Login,
navigationOptions: ({navigation}) => {
return {
drawerLabel: () => null,
drawerLockMode: 'locked-closed'
}
}
},
SignUp: {
screen: SignUp,
navigationOptions: ({navigation}) => {
return {
drawerLabel: () => null,
drawerLockMode: 'locked-closed'
}
}
},
Loading: {
screen: Loading,
navigationOptions: ({navigation}) => {
return {
drawerLabel: () => null,
drawerLockMode: 'locked-closed'
}
}
},
},
{
headerMode: null,
contentComponent: DrawerComponents,
drawerWidth: WIDTH,
drawerPosition: "right",
initialRouteName: 'Home',
contentOptions: {
activeTintColor: "orange"
}
});
const Application = createAppContainer(TabNavigator)
});
I am expecting that upon clicking logout, the currently logged in user on firebase is signed out and then is redirected to the login screen.