Simple React Native Button Does not run function onPress - react-native

Question

I feel I've tried every combination of onPress events and function calls but nothing works. I am too noob to see what the issue is. Is it because it's rested in a few return statements?
I've ellipse'd code that isn't relevant. It works fine but the button will appear to not do anything. No errors or anything.
Thanks
import React from 'react';
import {
...
Button,
} from 'react-native';
//Import other react maps stuff
......
const dest = {latitude: -37.836037, longitude: 145.036730};
const waypoint = [
{address: '123 Fake St, Anglesea', latitude: -37.861738, longitude: 145.002500},
{address: '321 Real St, Anglesea', latitude: -37.806694, longitude: 145.010026}
];
class TodaysJobs extends React.Component {
state = {
location: null,
errorMessage: null,
};
//Get user current location
componentWillMount() {
....
}
_getLocationAsync = async () => {
....
};
moveMap() {
alert('Simple Button pressed');
const coordinate = waypoint[0];
this.map.animateToRegion({
latitude: -37.223423,
longitude: 145.423442,
latitudeDelta: 0.1,
longitudeDelta: 0.1
},
350
);
}
render() {
if (this.state.loaded) {
// if we have an error message show it
if (this.state.errorMessage) {
return (
....
);
} else if (this.state.location) {
// if we have a location show it
return (
<View style={{ flex: 1 }}>
<MapView
ref={(ref) => { this.mapRef = ref }}
style={ styles.mapStyle }
region={{
latitude: this.state.location.coords.latitude,
longitude: this.state.location.coords.longitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1
}}
>
{waypoint.map(function(item, i){
return <MapView.Marker
key={i}
coordinate={item}
/>
})}
<MapViewDirections
origin={this.state.location.coords}
waypoints={waypoint}
destination={dest}
/>
</MapView>
<ScrollView style={ styles.mapStyle }>
{waypoint.map(function(item, i){
return (
<View key={i} style={ styles.houseList }>
<Text>{item.address}</Text>
<Button
title={item.address}
onPress={this.moveMap}
/>
</View>
);
})}
</ScrollView >
</View>
);
}
} else {
// if we haven't loaded show a waiting placeholder
return (
<View>
<Text>Waiting...</Text>
</View>
);
}
}
}
export default TodaysJobs;
//Styles
....

Answer 1

You are using waypoint.map(function(item, i) and then onPress={this.moveMap}. this is defined in runtime and so this.moveMap will be undefined.
Try using fat arrow function instead of native function.
{
waypoint.map((item, i) => {
return (
<View key={i} style={styles.houseList}>
<Text>{item.address}</Text>
<Button
title={item.address}
onPress={this.moveMap}
/>
</View>
);
})
}
if you want to read more about the difference read this blog