React-native-mapbox-gl: ReactTextView cannot be cast to android.view.ViewGroup

[HikingDev]

the App works fine on IOS. For Android the App crashes and gives the following Stacktrace:
React-native-maps seem to have had a similar problem.
view inside Marker with

Unfortunately i can't figure out where exactly the error is located.

com.facebook.react.views.text.ReactTextView cannot be cast to android.view.ViewGroup
addFeature
    RCTMGLMapView.java:156
addFeature
    RCTMGLMapView.java:159
addView
    RCTMGLMapViewManager.java:51
addView
    RCTMGLMapViewManager.java:27
manageChildren
    NativeViewHierarchyManager.java:401
execute
    UIViewOperationQueue.java:180
run
    UIViewOperationQueue.java:815
flushPendingBatches
    UIViewOperationQueue.java:922
access$2100
    UIViewOperationQueue.java:47
doFrameGuarded
    UIViewOperationQueue.java:982
doFrame
    GuardedFrameCallback.java:31
doFrame
    ReactChoreographer.java:136
doFrame
    ChoreographerCompat.java:107
run
    Choreographer.java:872
doCallbacks
    Choreographer.java:686
doFrame
    Choreographer.java:618
run
    Choreographer.java:860
handleCallback
    Handler.java:751
dispatchMessage
    Handler.java:95
loop
    Looper.java:154
main
    ActivityThread.java:6119
invoke
    Method.java
run
    ZygoteInit.java:886
main
    ZygoteInit.java:776

[nitaliano]

We can solve it similar to what react-native-maps did this commit fixes it there https://github.com/react-community/react-native-maps/commit/6220583a19cf62f942b4166927aafeeeb1003a81

[nitaliano]

@roesneb what version of the repo are you using? and could you show me how you're rendering the PointAnnotations? I'm able to render PointAnnotations with text on master without seeing a crash

[HikingDev]

So the packages is: "@mapbox/react-native-mapbox-gl": "^6.0.2"

My Point Features are rendered in the following way:

  <MapboxGL.ShapeSource
              id='waypoints'
              shape={this.state.waypoints}
              images={{ watersource: Images.water }}>
              <MapboxGL.SymbolLayer id='wsIcons' style={mbStyles.icon} />
 </MapboxGL.ShapeSource>

How do i debug the native code? Open it in Android Studio and run it?
How do you know its the Points?
I do have custom components inside my MapView.

[grantyi]

I am running into the same issue when attempting to render text inside the MapView. The issue does not appear on iOS. @nitaliano using the fix you mentioned simply prevents it from being rendered at all.

[nitaliano]

Are you guys saying you're doing this?

<MapboxGL.MapView ...>
    <Text />
</MapboxGL.MapView>

[HikingDev]

I do have View, TouchableOpacity, Icons and a Modal inside of MapView.
No
<Text />

[nitaliano]

The MapView should really only contain map layers. I get that it's easier to have all of these in one component but I've always normally placed my views under the MapView. They don't really belong in the MapViews view tree

I would be curious to know if react-native-maps supports this use case, @alvelig do you happen to know?

[HikingDev]

I was not aware of that.
If that is the case, it should be somewhere in the docs mentioned.
But it seems that the improvement of the docs is already planned.

So the solution is than to rewrite my MapView?
I've put for example, additional control Buttons inside MapView,
what kind of made sense to me.

[nitaliano]

One of the issues with it is then the native code in this repo will decide how to add/remove those views instead of flowing through react native the natural way and could lead to unforeseen bugs in the future.

When I first used react-native-maps I implemented my MapView the same way that you have implemented it and at that time adding views into your MapView was unsupported until I added code to it to allow map layers to be wrapped by views here is the example for it https://github.com/react-community/react-native-maps/blob/master/example/examples/CustomOverlayXMarksTheSpot.js so I started placing all of my Views(controls) under my MapView moving forward, this is also similar to how things would work on the web. That's why I am curious if react-native-maps now supports this use case for adding support for controls

I think this topic should have some discussion. If we have enough people in the community that want this type of support we can look into adding it. I can see a benefit for it because we can have things like zoom, user tracking controls built in

[HikingDev]

That is basically what i've put inside the MapView.
Center current location, open Drawer, layers...
I think the amount of work moving it outside of the MapView is reasonable.

Since i don't really have much experience yet in React (native)
i don't have a problem to listen and improve my App Design!

I'll follow the discussion though!

[nitaliano]

You might have an invisible view that is overlaying on top of the map that is causing it to intercept those views, try toggle your inspector and seeing which view it might be, if you're doing things with flex:1 it's going to be filling the containers.

[HikingDev]

I used a view as a container for the controls.
Aren't the views supposed to be used as containers?

[nitaliano]

You can try messing with the pointerEvents on the View https://facebook.github.io/react-native/docs/view.html#pointerevents I think box-none will help out here.

<View pointerEvents='box-none'>
  {controlChildren}
</View>

Another way you can do it is absolutely position each View and have it wraps it's children's width and height so that it doesn't intercept touch events

[HikingDev]

Awesome! it works perfectly

[nitaliano]

I've been thinking about this and I think this library can add support for putting views inside of the MapView. I think the potential upside hear far outweighs the downside. What I'm planning is creating a MapboxGL.Control component where you could put your own views inside of that and be able to render it no problem, and I'm thinking about creating a new mono repo library called @mapbox/react-native-mapbox-gl-ui that will be a collection of ui components and map layers that can be used with this repo, so it would contain things like zoom buttons, user tracking buttons, etc...

Follow along here https://github.com/mapbox/react-native-mapbox-gl/issues/977

[yilakt]

Has this been added? Where can I find the documentation for MapboxGL.Control?