React-native-mapbox-gl: How can I add callout to symbol layer

[YKK101]

I add my data to mapview using source and symbol layer
and I need each point to show callout onclick
but after I query the selected feature from map
I don't know how can I add Callout to it

[nitaliano]

View callouts are currently not supported with Symbol Layers yet

[josenaves]

@nitaliano how do I create something like a callout using symbol layer? Do we have an example for that ?
I'm refactoring my app to use ShapeSource and SymbolLayer instead of PointAnnotation (+ Callout).

[glennverschooren]

@josenaves @nitaliano I actually have the same question.

[jsina]

@nitaliano is there any way to have something like callouts when using symbol layer ? I know we could have get textField on style but I need some box with some callback actions on it.

[abegehr]

@nitaliano, is it foreseeable when Callouts will be supported for symbol layers? Coolest would be custom views as Callouts of course! :)

[jruddell]

@abegehr
You can add a callout to your symbol layer, it just is slightly hacky. After reviewing the different examples I merged a few to make it work!

1. Render a PointAnnotation for the features you want to click. Make it invisible with view styles, and dont accept presses on the annotation itself (like to open / close a Callout).
2. add a onPress handler on the MapLayer component (or the symbol layer you want).
3. in the press handler, find a feature if it was clicked. map.queryRenderedFeaturesAtPoint
4. If feature exists assign whatever unique id you have for the annotation in state
5. the selected prop is set to true on PointAnnotation when the state id that was set matches a PointAnnotation
6. when deselect remove from state

If that was hard to follow I can try and post a code example

[tr3v3r]

@jruddell I suppose it easier to make callout from PointAnnotation )

<PointAnnotation>
 <View style={styles.callout}> </View>
</PointAnnotation>