Method render

example/src/examples/Callouts.tsx:74–156

()

  }

  render() {
    const {region, markers} = this.state;
    return (
      <View style={styles.container}>
        <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={region}
          zoomTapEnabled={false}>
          <Marker
            ref={ref => {
              this.marker1 = ref;
            }}
            coordinate={markers[0].coordinate}
            title="This is a native view"
            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
          />
          <Marker coordinate={markers[1].coordinate}>
            <Callout style={styles.plainView}>
              <View>
                <Text>This is a plain view</Text>
              </View>
            </Callout>
          </Marker>
          <Marker
            coordinate={markers[2].coordinate}
            calloutOffset={{x: -8, y: 28}}
            calloutAnchor={{x: 0.5, y: 0.4}}
            ref={ref => {
              this.marker2 = ref;
            }}>
            <Callout
              alphaHitTest
              tooltip
              onPress={_ => {
                Alert.alert('callout pressed');
              }}
              style={styles.customView}>
              <CustomCallout>
                <Text>{`This is a custom callout bubble view ${this.state.cnt}`}</Text>
                {Platform.OS === 'ios' && (
                  <CalloutSubview
                    onPress={() => {
                      this.setState({cnt: this.state.cnt + 1}, () => {
                        this.marker2.redrawCallout();
                      });
                    }}
                    style={[styles.calloutButton]}>
                    <Text>Click me</Text>
                  </CalloutSubview>
                )}
              </CustomCallout>
            </Callout>
          </Marker>
          <Marker
            ref={ref => {
              this.marker4 = ref;
            }}