Sample use of react-native-maps with a tabbed layout

app.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  Text,
  ViewPagerAndroid,
  View,
} from 'react-native';
import MapView from 'react-native-maps';

class OverlapExample extends Component {

  state = {
    page: 0,
    animationsAreEnabled: true,
    visibleMap: 0,
  }

  move = (delta) => {
    const page = this.state.page + delta;
    this.go(page);
  }

  go = (page) => {
    if (this.state.animationsAreEnabled) {
      this.viewPager.setPage(page);
    } else {
      this.viewPager.setPageWithoutAnimation(page);
    }

    this.setState({ page });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.buttons]}>
          <TouchableOpacity
            style={[styles.button, styles.button1]}
            onPress={() => this.move(-1)}
          >
            <Text style={styles.buttonText}>Show Map One</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.button, styles.button2]}
            onPress={() => this.move(1)}
          >
            <Text style={styles.buttonText}>Show Map Two</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.mapContainer}>
          <ViewPagerAndroid
            style={styles.viewPager}
            initialPage={0}
            ref={viewPager => { this.viewPager = viewPager; }}
          >
            <View style={styles.pageStyle}>
              <View style={{ ...StyleSheet.absoluteFillObject, flex: 1 }}>
                <MapView style={{ flex: 1 }} />
              </View>
            </View>
            <View style={styles.pageStyle}>
              <View style={{ ...StyleSheet.absoluteFillObject, flex: 1 }}>
                <MapView id="foo" style={{ flex: 1 }} />
              </View>
            </View>
          </ViewPagerAndroid>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttons: {
    flexDirection: 'row',
  },
  viewPager: {
    flex: 1,
  },
  pageStyle: {
    alignItems: 'center',
    padding: 20,
  },
  button: {
    alignItems: 'center',
    flex: 1,
    height: 75,
    justifyContent: 'center',
  },
  button1: {
    backgroundColor: '#D32F2F',
  },
  button2: {
    backgroundColor: '#512DA8',
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
  },
  mapContainer: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    opacity: 0,
  },
  focused: {
    opacity: 0.5,
  },
});

AppRegistry.registerComponent('example2', () => OverlapExample);