Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample use of react-native-maps with a tabbed layout
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.