Method render

example/src/examples/CachedMap.tsx:37–80

()

  }

  render() {
    const {width} = Dimensions.get('window');
    const mapSize = width - HORIZONTAL_PADDING * 2;
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            onPress={() => this.toggleCache()}
            style={[styles.bubble, styles.button]}>
            <Text style={styles.buttonText}>
              {this.state.cache ? 'Cached' : 'Not cached'}
            </Text>
          </TouchableOpacity>
        </View>
        <FlatList
          data={this.state.data}
          renderItem={({item: region}) => (
            <View style={styles.item}>
              <Text>{region.name}</Text>
              <MapView
                provider={this.props.provider}
                style={{
                  width: mapSize,
                  height: mapSize,
                }}
                initialRegion={region}
                cacheEnabled={this.state.cache}
                zoomEnabled
                loadingIndicatorColor="#666666"
                loadingBackgroundColor="#eeeeee">
                <Marker
                  coordinate={region}
                  centerOffset={{x: -18, y: -60}}
                  anchor={{x: 0.69, y: 1}}
                  image={flagImg}
                />
              </MapView>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({