I recently implemented a Google map in my React Native app. However, I'm facing an issue where the icons on the map are overlapping each other instead of being positioned on either side. Despite trying various configurations, the result remains unchanged. Another strange behavior is that the button seems to respond even when not clicked.
The structure of my code includes a container with a MapView nested inside. Here's a snippet:
container: {
flex: 1,
flexDirection: 'column'
},
map:{
height: 90+ "%",
flexDirection: 'column'
},
profileBtn:{
position: 'absolute',
top: 25,
right: 30,
width: 25,
height: 15,
borderRadius: 25/2,
},
homeBtn:{
position: 'absolute',
top: 20,
left: 5,
width: 200,
height: 100,
borderRadius: 25/2,
},
<MapView
style={styles.map}
initialRegion={{
latitude:this.state.latitude,
longitude:this.state.longitude,
latitudeDelta: 0.0043,
longitudeDelta: 0.0034
}}
ref={c => this.mapView = c}
onPress={this.onMapPress}
loadingEnabled={true}
>
<View style ={styles.topMap}>
<TouchableOpacity
style={styles.profileBtn}
onPress={()=>{ this.handleClickProfile() }}
>
<Image
source={profile}
borderRadius={17}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.homeBtn}
onPress={()=>{ this.handleClickFavourite() }}
>
<Image
source={require("./home.png")}
borderRadius={49}
/>
</TouchableOpacity>
</View>
{markers}