React Native (feat. Redux) Routing in React Native

Transcript from the "Routing in React Native" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: So now we're gonna talk about the different routing strategies in React. And then the one that we're gonna use. So when you think of a mobile app compared to a web app, routing is totally different. It's not even the same. There's completely different ways to route but React Native actually standardized, I wouldn't say standardized.

[00:00:26] It actually brought over the way you route from the web over to mobile. The only issue is that they created a navigation library when React Native first came out and it was not, I don't wanna say it was horrible, it was just people didn't like it. It wasn't that good.

[00:00:44] And I don't know if it was because they were expecting it to be more like the web or if it was just, we expected more like mobile. I don't know, people just didn't like it. But it's still in its React Native and then couple months ago they actually started working on a new version of it, and that's actually in there too.

[00:00:59] It's not really documented but it's in Reactive Native and you can use it. So some people have taken that and built their own routers on top of that, which are actually pretty neat. But because of the state of navigation in React Native at this point and there's really not a standard way of doing it.

[00:01:17] Yeah, you can use the one that React Native provides but it's not the one the community wants, and the community's still kind of making which ones they want. I decide to go with a tab navigation. So that we can avoid all of the routing mess and just use tabs, which is a lot easier and a lot more appropriate for this app.

[00:01:33] So we're gonna use tabs and there's a couple ways we can do it. If we go look at the docs. Who here has build Native Android apps? I think I asked this yesterday. Nobody? So there's this thing in Native Android called a, what is it? A view pager?

[00:02:02] Yeah. Which is more like, it's just like a slide. Have you ever been on an app and you get to the intro screen and you're just swiping through this intro of the app. And then you can play it, it's like a view pager. So Android has this stuff kind of built in and most Android apps have really sophisticated tab interfaces.

[00:02:21] And iOS, actually the UI kit, I forgot what version has a really has really sweet tab interfaces too. So what they did was they try to standardize that, but the one React Native provides actually wasn't, I didn't think it was that extendable. So somebody created this really, really awesome one, which is the one that we're gonna use.

[00:02:37] And it's called react-native-scrollable-tab-view as really legit. And what I think is really cool about it is that is actually built in a 100% JavaScript. There's no Native components for this. So, it's not wrapping like the Native tab interface for IOS or the Native tab interface for Android, it's purely JavaScript, which is amazing.

[00:02:58] And that's why I really like React Native because you can just make everything in JavaScript that immediately works for Android and IOS. Or you can grab the Native version of IOS and wrap it and grab the Native Android version and wrap it. It's totally up to you because the performance in JavaScript is actually pretty good.

[00:03:13] So it's totally fine. So this person decided to use 100% JavaScript, which I think is amazing. If you look at the source code, it's actually pretty good. And it looks like this, it's animated, and it's scrolling and it's legit. So I'm just gonna walk through how to add this to the todo app, and what you're gonna do is add this to the Sweat Book app.