Loading video...

Video Failed to Load

Go Home

React native view rendering inside of a Mapbox map Powered by nitro

15,017 views • 7 months ago •via X (Twitter)

18 Comments

TC's profile picture
TC7 months ago

How is this different to (genuine question)

Fabrizio's profile picture
Fabrizio7 months ago

That it uses the mapbox navigation sdk under the hood instead of the plain map sdk, since I will need to implement navigation for this app

Hewad Mubariz's profile picture
Hewad Mubariz7 months ago

incredible 🔥

Juan | chooselife.club's profile picture
Juan | chooselife.club7 months ago

How, I have been wanting this for sooo long bro. It’s open source? It works only over rnmapbox?

Fabrizio's profile picture
Fabrizio7 months ago

It’s a very custom implementation for an app I’m working on, not planning to open source this, I’m refining the implementation tho, I could write an article about how I did it later

Juan | chooselife.club's profile picture
Juan | chooselife.club7 months ago

Is this a nitro view as child of a rnmapbox Mark component?

Fabrizio's profile picture
Fabrizio7 months ago

The map itself is a nitro view, for the marker i was trying to use a nitro view as well but seems to be not be possible due to lack of children support in nitro views, using a Fabric view for that

Average Joe's profile picture
Average Joe7 months ago

curious to hear more about this

Fabrizio's profile picture
Fabrizio7 months ago

I will show more, right now this is all I have

Yadwinder Singh's profile picture
Yadwinder Singh7 months ago

Hey @ipla03 It looks very awesome. What are the libraries used? Or it it custom completely? Curious to know the process or a flow.

Fabrizio's profile picture
Fabrizio7 months ago

It's fully custom - The map itself is a nitro view showing a mapbox MapView from the navigation sdk - For the marker i use a Fabric view that overrides the methods used to mount children, so instead of mounting them to itself it will mount them inside of the map as annotations Had to fallback to a Fabric view for that because afaik children support in Nitro is still not ready

Yadwinder Singh's profile picture
Yadwinder Singh7 months ago

Sorry I didn't understand the meaning of nitro view here. Is it any special kind of <View /> how to get that?

The Wicked Killah's profile picture
The Wicked Killah7 months ago

Curius how you did it I wanna load stuff inside react native maps

Fabrizio's profile picture
Fabrizio7 months ago

It’s all custom made, I’m not using react-native-map, the maps is a nitro view showing a Mapbox MapView, to add the item I have a Fabric view that overrides the mount child method to add it inside of the map instead that in itself as a child

Guillermo López's profile picture
Guillermo López7 months ago

@thewickedkillah Thats sounds good, you can share demo open source?

Fabrizio's profile picture
Fabrizio7 months ago

@thewickedkillah It’s for a private app of mine, won’t be open sourced at the moment

Gurinder saini 📱's profile picture
Gurinder saini 📱7 months ago

The question was how many custom view markers we can render with this approach on the map. If it is able to render 1000s of marker at a time on map then it is great or not then what is the other way to do this if we want custom marker view map

Jon's profile picture
Jon7 months ago

🤯🤯🤯

Related Videos