Cannot read property `navigation` of undefined - react-native

Question

The following code all works except for when I click on the last SettingsList.Item component inside of the SettingsRoute. The error I get is "Cannot read property navigation of undefined".
import React from "react";
import {
View,
TextInput,
Alert,
KeyboardAvoidingView,
Dimensions,
AsyncStorage,
ActivityIndicator,
BackHandler
} from "react-native";
import { withNavigation } from "react-navigation";
import PTRView from "react-native-pull-to-refresh";
import SettingsList from "react-native-settings-list";
import { Text, Toast, Root } from "native-base";
import {
BottomNavigation,
Surface,
Button,
List,
Headline,
Switch,
Divider,
Paragraph,
Dialog,
Portal
} from "react-native-paper";
import { Home } from "../components/";
let width = Dimensions.get("window").width;
let height = Dimensions.get("window").height;
const HomeRoute = () => (
<PTRView onRefresh={() => this.refresh}>
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Logged in:</Text>
<Card name="Hello World" color="#d50000" letterGrade="ABC" grade="123" />
</View>
</PTRView>
);
const Card = props => (
<Surface
style={{
margin: 4,
padding: 8,
backgroundColor: props.color,
elevation: 3,
justifyContent: "center",
width: width - 21,
height: height / 9
}}
>
<Text
style={{
textAlign: "right",
alignSelf: "stretch",
color: "white",
fontSize: responsiveFontSize(2.2)
}}
>
{props.grade}
</Text>
<Text
style={{
textAlign: "left",
color: "white",
fontSize: responsiveFontSize(2.6)
}}
>
{props.name}
</Text>
<Text
style={{
textAlign: "right",
alignSelf: "stretch",
color: "white",
fontSize: responsiveFontSize(2.3)
}}
>
{props.letterGrade}
</Text>
</Surface>
);
const SettingsRoute = () => (
<View style={{ flex: 1, width: width - 9, justifyContent: "center" }}>
<SettingsList backgroundColor="transparent">
<SettingsList.Header
headerText="Settings"
headerStyle={{ color: "black" }}
/>
<SettingsList.Item
itemWidth={50}
title="About/Credits"
onPress={() => Alert.alert("Test")}
/>
<SettingsList.Item
itemWidth={50}
title="Help"
onPress={() => Alert.alert("TEST")}
/>
<SettingsList.Item
itemWidth={50}
title="Logout"
onPress={() => this.props.navigation.navigate("chooseDistrict")}
/>
</SettingsList>
</View>
);
const responsiveFontSize = f => {
return Math.sqrt(height * height + width * width) * (f / 100);
};
export class Grades extends React.Component {
static navigationOptions = {
title: "Grades",
headerLeft: null,
gesturesEnabled: false
};
constructor() {
super();
this.state = {
index: 0,
isAuthed: false,
routes: [
{ key: "home", title: "Home", icon: "home"},
{
key: "settings",
title: "Settings",
icon: "settings",
}
],
visible: false
};
}
_handleIndexChange = index => this.setState({ index });
_renderScene = BottomNavigation.SceneMap({
home: HomeRoute,
settings: SettingsRoute
});
refresh() {
//get grades and repopulate tabs
//refresh
this.setState({ isAuthed: true });
}
componentWillMount() {
BackHandler.addEventListener("hardwareBackPress", function() {
return true;
});
}
pleaseLogout() {
this.props.navigation.navigate("login");
}
render() {
return (
<Root>
<BottomNavigation
styles={{ backgroundcolor: "#8499B1" }}
navigationState={this.state}
onIndexChange={this._handleIndexChange}
renderScene={this._renderScene}
/>
</Root>
);
}
}
export default withNavigation(Grades);
Do I need to pass props into the function?
Am I even defining my variables in the right place?
Thanks in advance

Answer 1

I made a very silly typo.
onPress={() => this.props.navigation.navigate("login")} <- this does not work (login is not capitalized)
onPress={() => this.props.navigation.navigate("Login")} <- this works!