The problem you have is that your context is bound improperly in this event handler, and this function behaves differently between contexts in JavaScript. You’ve got to have this refer correctly to the instances of your class Map, hence you need the proper binding on your functions.<\/p>\n
Bind your function in the component’s constructor.<\/p>\n
Change your class to include this constructor where it binds the function:<\/p>\n
var React = require('react-native');\r\n\r\nvar {\r\n StyleSheet,\r\n Text,\r\n View,\r\n Image,\r\n MapView,\r\n Component,\r\n} = React;\r\n\r\nclass Map extends Component {\r\n constructor(props) {\r\n super(props);\r\n this._onRegionChangeComplete = this._onRegionChangeComplete.bind(this);\r\n this._getData = this._getData.bind(this);\r\n }\r\n\r\n render() {\r\n return (\r\n <View style={styles.container}>\r\n <MapView style={styles.map} \r\n showsUserLocation={true}\r\n onRegionChangeComplete={this._onRegionChangeComplete}\r\n \/>\r\n <\/View>\r\n );\r\n }\r\n\r\n _onRegionChangeComplete(region) {\r\n this._getData(); \/\/ Call the _getData function\r\n }\r\n\r\n _getData() {\r\n console.log(\"Data fetched\");\r\n }\r\n}\r\n\r\nvar styles = StyleSheet.create({\r\n container:{\r\n flex: 1\r\n },\r\n map: {\r\n flex: 1,\r\n },\r\n image: {\r\n width: 64,\r\n height: 64\r\n }\r\n});\r\n\r\nmodule.exports = Map;\r\n<\/pre>\nIn the constructor, this._onRegionChangeComplete and this._getData are bound to the instance of the class using.bind(this). So, when called, this would refer to the class instance.<\/p>\n","protected":false},"excerpt":{"rendered":"
The problem you have is that your context is bound improperly in this event handler, and this function behaves differently between contexts in JavaScript. You’ve got to have this refer correctly to the instances of your class Map, hence you need the proper binding on your functions. Bind your function in the component’s constructor. Change […]<\/p>\n","protected":false},"author":1,"featured_media":12075,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-12074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12074"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12074"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12074\/revisions"}],"predecessor-version":[{"id":12085,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12074\/revisions\/12085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12075"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}