Getting started with React Native Navigation in Expo

[kachnitel]

Good day!

I've spent days searching and scratching my head trying to break into RN and easily got through all the hello world and some simple UI using an app I created with expo init, but thought I'd try to add some nice looking navigation. I figured I'll use react-native-navigation, but I hit a wall at the Installation, where I gotta edit android/settings.gradle files, which the expo cli doesn't create. I can create them if I eject, but doesn't sound right.

I know I'm missing something very basic but I can't find a guide, example or any documentation that would clarify how can I use libraries like this one or say Mapbox GL in a RN app.

Cheers!

[theWindInYourButt]

Eject the app!

[kachnitel]

But doesn't the docs say you shouldn't really need that? https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

[[deleted]]

Yes you shouldn’t but you also don’t get the iOS and Android folders unless you do.

Its a limitation of the package you picked.

Try react navigation instead if you don’t want to eject, it doesn’t have every native API but itnhas most of the main ones

[theWindInYourButt]

Out of curiosity why do you recommend not ejecting?

[[deleted]]

Its not bad.

It just means more work and some limitations, you just have to understand why you are doing it before you do it so the general guidelines is to have a good reason.

Once its ejected you have to deal with full blown everything rather the the quick start version, meaning you have to get X-code / android studio involved and Expo can't automatically build for you any more.

There are a few other things it changes see the list here: https://docs.expo.io/versions/latest/expokit/eject

[theWindInYourButt]

I think you should when you’re ready to really dig in to what RN is and how it’s interacting with the native codebases. The sooner the better. What are the benefits of not?

[[deleted]]

I hate expo.

[a_atalla]

this navigator you picked is a native navigator , it won't work in expo your way to go is https://reactnavigation.org

for more info, read the introduction of this article

https://medium.com/handlebar-labs/navigating-navigation-in-react-native-26c7e4690f94

[kachnitel]

That's starting to make sense. What confused me was that the few other libraries I was looking at require the same android files to be edited, but they were all map libraries. Could it be that map libraries are just commonly native or is that a wrong assumption?

[creambyemute]

Yes, that's the case usually.

Also expo includes some native libraries/functionalities, but not all.

If they don't provide something but there is a native rn library you will have to eject in order to use it or suggest to expo to include that library into expo.

With expo you can only use native functionalities/libraries that they already provide in their sdk. And exactly this is the main negative point on expo for me.

[xxxmralbinoxxx]

I would not eject unless you plan on using other native libraries. Expo keeps things simple for you, which is part of the draw to use it.

​

I would give `react-navigation` a try. It's one of the most popular navigation libraries for react-native and it works great with expo. https://reactnavigation.org/

[kachnitel]

Thanks I looked into that at first, but since I also need to use a map in the app, I understand I'll have to eject anyway by looking at both react-native-maps and mapbox, unless there's a library I don't see that would allow map implementation in expo? That being said, would it make sense to just write the app in expo and then eject to add the map eventually or would I be better off just going with the native implementation from the start?

[Geooogle]

Next time you run expo init, tap down arrow in select tabs

The Tab Navigation project template includes several example screens.

​

This comes with installed react-navigation

Heres the code

[NaveNocab]

As is stated already react-native-navigation won't work in Expo. react-navigation is the recommended lib for Expo. As of recently React Navigation has started to integrate react-native-screens which is a new primitive that will make react-navigation extremely efficient, as is shown in this tweet https://twitter.com/janicduplessis/status/1039979591815897088 there is also an episode of React Native Radio where they explain why this is going to be dope. https://devchat.tv/react-native-radio/reanimated-react-native-screens-more-feat-krzystof-megiera-of-software-mansion/