SymbolLayer children don't render on Android

Epick362 commented 4 years ago

Describe the bug I am looking for a way to display custom Symbols (in this case a FontAwesome Icon from rn-vector-icons). I have found issue #225 detailing a way to display such Icons inside SymbolLayer, the caveat being that this method works on iOS but not on Android as @arnaudambro tested https://github.com/react-native-mapbox-gl/maps/issues/225#issuecomment-573058350.

I have tried narrowing the issue down although I do not understand native components very well but I noticed iOS has this section in RCTMGLSymbolLayer.m

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-missing-super-calls"
- (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex {
    [_reactSubviews insertObject:(UIView *)subview atIndex:(NSUInteger) atIndex];
}
#pragma clang diagnostic pop

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-missing-super-calls"
- (void)removeReactSubview:(id<RCTComponent>)subview {
    [_reactSubviews removeObject:(UIView *)subview];
}
#pragma clang diagnostic pop

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-missing-super-calls"
- (NSArray<id<RCTComponent>> *)reactSubviews {
    return nil;
}
#pragma clang diagnostic pop

Whereas RCTMGLSymbolLayerManager.java or RCTMGLSymbolLayer.java is missing any mention of children.

To Reproduce Code to reproduce is included here: https://github.com/react-native-mapbox-gl/maps/issues/225#issuecomment-573058350

Expected behavior Consistently render SymbolLayer children on both platforms.

Screenshots iOS iOS Android Android text missing

Versions (please complete the following information):

Platform: Android
Device: any
Emulator/ Simulator: no
OS: Android 9
react-native-mapbox-gl Version 7.2.0
React Native Version 0.61.5

mfazekas commented 4 years ago

@Epick362 On iOS symbol layer supports taking snapshot of children, then adding that as image.

https://github.com/react-native-mapbox-gl/maps/blob/ecdcecd24f1a453c82db32f894c16deb2678e717/ios/RCTMGL/RCTMGLSymbolLayer.m#L106-L117

PointAnnotation has similiar code on android. https://github.com/react-native-mapbox-gl/maps/blob/master/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L135

However it's less than ideal as there is no way to display different icons for symbols. We don't have this implemented in android. You can try to use react-native-view-shot or something similiar to capture view and convert to image, which symbol layer can render.

Epick362 commented 4 years ago

Thank you for the quick reply. So the text that is displayed on iOS is just a screenshot of SymbolLayer's children? I'm not sure I understand this part of your reply: "However it's less than ideal as there is no way to display different icons for symbols.". Wouldn't different children for each SymbolLayer create a different "screenshot" to display? Such solution would work for me and I can try implementing this on the android side with the PointAnnotation example you provided.

mfazekas commented 4 years ago

@Epick362 Yes that is screenshot of the RN view. Symbol layer displays images, it cannot display views on either platform.

Yes different SymbolLayers can display different images (with the current subchildern solution). But you can only have 1 image type in SymbolLayer. Normally a single simbol layer can have different image by using SymbolLayer#iconImage expression, see ShapeSourceIcon example

AppSphere commented 4 years ago

As a Workaround I started using the Visibility property in Symbol Layer, I know this is a not a good solution but for now it worked for me.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.