Class CachedMap

example/src/examples/CachedMap.tsx:17–81

const VERTICAL_PADDING = 6;

class CachedMap extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [...COUNTRIES],
      cache: true,
    };
  }

  toggleCache() {
    // a hack to force listview to reload with the same data
    this.setState({
      data: this.state.data,
    });
    this.setState({
      cache: !this.state.cache,
      data: [...COUNTRIES],
    });
  }

  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>