{"action":"created","issue":{"url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/486","repository_url":"https://api.github.com/repos/lelandrichardson/react-native-maps","labels_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/486/labels{/name}","comments_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/486/comments","events_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/486/events","html_url":"https://github.com/lelandrichardson/react-native-maps/issues/486","id":172818430,"number":486,"title":"Callout does not update after props change on Android","user":{"login":"wkrause13","id":4914208,"avatar_url":"https://avatars.githubusercontent.com/u/4914208?v=3","gravatar_id":"","url":"https://api.github.com/users/wkrause13","html_url":"https://github.com/wkrause13","followers_url":"https://api.github.com/users/wkrause13/followers","following_url":"https://api.github.com/users/wkrause13/following{/other_user}","gists_url":"https://api.github.com/users/wkrause13/gists{/gist_id}","starred_url":"https://api.github.com/users/wkrause13/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wkrause13/subscriptions","organizations_url":"https://api.github.com/users/wkrause13/orgs","repos_url":"https://api.github.com/users/wkrause13/repos","events_url":"https://api.github.com/users/wkrause13/events{/privacy}","received_events_url":"https://api.github.com/users/wkrause13/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-23T22:02:01Z","updated_at":"2016-08-24T01:37:31Z","closed_at":null,"body":"I'm having an issue on Android where the content of the tooltip does not update after its props have changed. \r\n\r\nI am fetching data from an API as a result of the onPress event for a custom marker. After the data is returned, I am updating the state of the component, and the relevant attributes are passed down as props to the content component for the custom callout. On iOS the custom content re-renders after the state is updated. However, on android, the content does not re-render. \r\n\r\n```\r\n            <MapView.Marker\r\n              onPress={() => this.fetchData(item.id)}\r\n              key={key}\r\n              coordinate={{latitude, longitude}}\r\n            >\r\n              <MapView.Callout\r\n                    style={{width: 200}}>\r\n                    <CustomTooltipContent text={this.state.text} isLoading={this.state.isLoading} />\r\n            </MapView.Callout>\r\n            </MapView.Marker>\r\n```"},"comment":{"url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/comments/241933557","html_url":"https://github.com/lelandrichardson/react-native-maps/issues/486#issuecomment-241933557","issue_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/486","id":241933557,"user":{"login":"wkrause13","id":4914208,"avatar_url":"https://avatars.githubusercontent.com/u/4914208?v=3","gravatar_id":"","url":"https://api.github.com/users/wkrause13","html_url":"https://github.com/wkrause13","followers_url":"https://api.github.com/users/wkrause13/followers","following_url":"https://api.github.com/users/wkrause13/following{/other_user}","gists_url":"https://api.github.com/users/wkrause13/gists{/gist_id}","starred_url":"https://api.github.com/users/wkrause13/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wkrause13/subscriptions","organizations_url":"https://api.github.com/users/wkrause13/orgs","repos_url":"https://api.github.com/users/wkrause13/repos","events_url":"https://api.github.com/users/wkrause13/events{/privacy}","received_events_url":"https://api.github.com/users/wkrause13/received_events","type":"User","site_admin":false},"created_at":"2016-08-24T01:37:31Z","updated_at":"2016-08-24T01:37:31Z","body":"Here is a simple working example. The increment button increments the count variable. However, on android you need to dismiss the tooltip and reopen it to see the changed. On iOS you see the counter increment like a normal react component.\r\n\r\n```jsx\r\n\r\n/**\r\n * Sample React Native App\r\n * https://github.com/facebook/react-native\r\n * @flow\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport {\r\n  AppRegistry,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  TouchableHighlight\r\n} from 'react-native';\r\n\r\nimport MapView from 'react-native-maps';\r\n\r\n\r\nclass mapTest extends Component {\r\n  constructor () {\r\n    super()\r\n    this.state= {\r\n      coordinate: {\r\n        latitude:37.78825,\r\n        longitude: -122.4324\r\n      },\r\n      count: 0\r\n    }\r\n    this.increment = this.increment.bind(this)\r\n  }\r\n  increment () {\r\n    this.setState({count: this.state.count + 1})\r\n  }\r\n  render() {\r\n    const {coordinate} = this.state\r\n    return (\r\n      <View style={{flex: 1}}>\r\n        <View style={styles.container}>\r\n          <MapView\r\n          style={styles.map}\r\n            initialRegion={{\r\n              latitude: 37.78825,\r\n              longitude: -122.4324,\r\n              latitudeDelta: 0.0922,\r\n              longitudeDelta: 0.0421,\r\n            }}\r\n          >\r\n            <MapView.Marker coordinate={coordinate}>\r\n              <MapView.Callout style={{width:250}}>\r\n                <View><Text>{this.state.count}</Text></View>\r\n              </MapView.Callout>\r\n            </MapView.Marker>\r\n          </MapView>\r\n      </View>\r\n        <View style={{flex: 1, justifyContent:'center', alignItems:'center'}}>\r\n          <TouchableHighlight onPress={this.increment} underlayColor={'#e69500'} style={styles.button}>\r\n            <Text style={{color: '#FFFFFF', fontWeight:'bold'}}>Increment</Text>\r\n          </TouchableHighlight>\r\n        </View>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 3 \r\n  },\r\n map: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n  },\r\n  button: {\r\n    height: 40,\r\n    width: 100,\r\n    alignItems:'center',\r\n    justifyContent:'center',\r\n    backgroundColor: 'orange',\r\n    borderRadius: 5,\r\n    bottom:0\r\n  }\r\n});\r\n\r\nAppRegistry.registerComponent('mapTest', () => mapTest);\r\n\r\n``` \r\n\r\n![maptooltipissue](https://cloud.githubusercontent.com/assets/4914208/17915589/a5c5f452-6979-11e6-967c-265777c58a8e.png)\r\n"}}
{"actor":{"display_login":"wkrause13"}}