App.jsx

import React from 'react'
import { MapView, FileSystem, Constants } from 'expo'
import { Button } from 'react-native-elements'

export default class App extends React.Component {
  state = {
    urlTemplate: 'http://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
    offlineUrlTemplate: `${FileSystem.documentDirectory}tiles/{z}/{x}/{y}.png`,
    isOffline: false,
    mapRegion: undefined
  }

  render() {
    const { isOffline } = this.state
    const urlTemplate = isOffline
      ? this.state.offlineUrlTemplate
      : this.state.urlTemplate
    return (
      <View style={styles.container}>
        <View style={styles.actionContainer}>
          <Button
            raised
            borderRadius={5}
            title={isOffline ? 'Go online' : 'Go offline'}
            onPress={() => {
              isOffline
                ? this.setState({ isOffline: false })
                : this.setState({ isOffline: true })
            }}
          />
        </View>

        <MapView
          style={{ flex: 1 }}
          onRegionChange={(mapRegion) => this.setState({mapRegion}) }>
          <MapView.UrlTile urlTemplate={urlTemplate} zIndex={1} />
        </MapView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  actionContainer: {
    flexDirection: 'row',
    padding: 15,
    paddingTop: Constants.statusBarHeight + 15,
    zIndex: 999,
    justifyContent: 'space-around',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0
  },
  container: {
    flex: 1
  }
})