React Native Maps with sticky and multiple Callouts - Same as Uber app - react-native

Question

I would like to have multiple callout which are alway open in the same way as Uber taxi app does.
The criteria I want are
Multiple Callouts
Callout can be pressed
I have two solutions. One is to always set callouts open by reference once it is mounted, but it comes with only one active callout at once. Secondly, I use custom Marker with absolute position and TouchableOpacity as child. I can display multiple, but the button nested in <MapView.Marker> cannot be pressed.

Answer 1

I was struggling with the same problem for sometime. Actually this is how I stumbled across this question. I wanted to share what I ended up with. Apparently we can place anything inside the Marker component, so putting a View and an Image inside did the trick:
<Marker coordinate={coords} style={styl.customMarker}>
<View style={styl.addressBox}>
<TouchableOpacity onPress={() => console.log('Click!')}>
<Text numberOfLines={2} style={styl.addressText}>
Some location address goes here
</Text>
</TouchableOpacity>
</View>
<Image source={require('../assets/locationPin.png')} />
</Marker>
const styl = StyleSheet.create({
customMarker: {
justifyContent: 'center',
alignItems: 'center'
},
addressBox: {
width: 150,
height: 45,
backgroundColor: '#fff',
paddingVertical: 5,
paddingHorizontal: 7,
borderRadius: 5,
borderWidth: 0.5,
borderColor: '#ccc',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 3
},
addressText: {
textDecorationLine: 'underline'
}
});
This is how it looks:
This is a Grab (Uber alternative) implementation. But you can play around with View and Image styles to achieve Uber like results.
Hope this helps someone in the future. Cheers!