React Native (feat. Redux) React Native (feat. Redux)

Using the React Native Scrollable Tab View Component

Check out a free preview of the full React Native (feat. Redux) course:
The "Using the React Native Scrollable Tab View Component" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates how to use the react-native-scrollable-tab-view component inside the Todo application. The root component is wrapped in a <TabView> and given a tabLabel property. Any subsequent tabs are added within they same <TabView> component.

Get Unlimited Access Now

Transcript from the "Using the React Native Scrollable Tab View Component" Lesson

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

[00:00:04]
>> Scott Moss: What we wanna do first is I'm just going to pull open the todo app.
>> Scott Moss: And it's actually pretty simple. The person that made this did a really good job on it. I was working on my own and halfway through I found this and I was like that's the one that I want.

[00:00:28] So we're gonna change a few things around in our todo app to actually have this makes sense. Otherwise it's gonna be kind of crazy. So let's bring the area over there. Okay, let's just run this very quick.
>> Scott Moss: All right so I'll let that run, so the first thing we need to do is actually download it.

[00:00:50] So we can download it by NPM install this thing. React-native-scrollable-tab-view. Really verbose. So we'll download that and then we'll just import the react-native-scrollable-tab-view. Sometimes you'll see require, if you're not familiar with node, that's just the ES5. This is how you require modules in common JS, we just used the ES6 version which is import.

[00:01:20] But when that compiles down to ES5, it just turns to this anyway. So that means we can use require in our code and still works. So let's download it. Let's head over and I now we just need to figure out an appropriate place to put this. So if you think about it.

[00:01:36] Let's go back to the design arch, now we're gonna be doing the todo app, we're now gonna go design our app. I know, so the todo app, I would say appropriate place would be probably the root of our application. It would be to perfect place to put the tab interview or the tab interface.

[00:01:53] So let's go there and then this case it's actually, is it the wrong app? Well, there it is, todo, you come up over here. Thank you. And this case is going to be main, so main is the root. So this is where we are gonna import it. So we'll say import and we'll say TabView from react-native-scrollable-tab-view.

[00:02:25] Cool. Yes?
>> Speaker 2: Question I think in the channel. Jessy T is asking about UI page view controller from iOS, if that will work?
>> Scott Moss: UI page view controller, I'm pretty sure that's iOS only. UI page view.
>> Speaker 2: So I don't understand the question that they're asking actually, so.

[00:02:56]
>> Scott Moss: Yeah, I think what he's asking for is for older version of react native, I don't they use that component anymore. They're trying to standardize everything but usually if it says UI on it or iOS only, it's only for that platform. So I guess that whatever Jessy is talking about is only gonna work for iOS.

[00:03:13] But I'm also pretty sure that that is deprecated. They no longer use it. Like a lot of the docs use some stuff that's not used anymore. That is the container part of the Android part, the container part of the Android part that he mentioned. Not sure. Well, I had to come back to that, I'm not sure what Jessy is talking about.

[00:03:38] Anyway, so the TabView here, we run Java right here in the main. Well, the scroll view tab, yes, the scroll view tab view will totally work because it's built in just JavaScript. This TabView that we're using right now is built to harvest in JavaScript which means it works on both platforms.

[00:03:56] It doesn't have any native dependencies. So yes, it will totally work. We haven't gotten to the section where we're gonna use native stuff yet. Cool, okay. So now we can just say scroll view or whatever we call it TabView. We just drop that in there, shazam. And the way this works is if you look at the docks, it's actually pretty cool.

[00:04:17]
>> Scott Moss: All we have to do is just pass in as children the components that we want to render. And it just have to have a tab label, we can put a tab bar here if we wanted to but it will just render one by default for us. So let's just do that.

[00:04:31] So we'll just say TabView, we have our todo and then we'll say tablabel equals Todos. That's it. So let's reload this. I think I got the wrong app one. Yeah.
>> Scott Moss: Sweet notes. Think I had to build it now, well, let's just reload just in case.
>> Scott Moss: Okay, let me rebuild this.

[00:05:08]
>> Scott Moss: Yeah, something's wrong.
>> Scott Moss: Sweet. So let this rebuild. So this is a simple way just to get some pretty slick tabs in our app. Super easy. Any questions on this so far? All right, cool. Let this build.
>> Scott Moss: Okay, adb devices. So the the device is offline, so I need it to shut it down and open it back up.

[00:05:59] I think it tried to install while there was an error up, so it just couldn't connect to it and this happens sometimes. I'm just gonna start it up again. There we go. Now with this scroller tab view, one is actually probably the best one I've seen because what it allows you to do which others don't.

[00:06:15] Is it allows you to create your own custom tab bar, where is it, where? So you can just render a bar, you can pass any component that you want. And then he goes on and he specifies what that tab are must be expecting. So as you look at our design, we have this transparent tab bar here and by running your own custom tab bar.

[00:06:39] You can do things like, so I think by default it will highlight the bottom of each square in the tab when it's like on active tab. But you can change that to don't hide the bottom, just hide the whole square or change the code of the icon or make it bigger, scale it.

[00:06:52] Or shrink it or wherever you want just by running your own bar and it won't affect new transitioning tabs which I think is pretty awesome. Okay, so we got that up and I was right it again. Adb devices, there it is.
>> Scott Moss: Actually, there is a really good router that it's been like, I've noticed coming out of the react native community.

[00:07:21] It's like a redux router I think, somebody made it for react native, looks pretty good, just haven't tried it out yet. I've been using the tabs.
>> Scott Moss: All right. Let's check this out.
>> Scott Moss: Let's go in here and reload.
>> Scott Moss: It's trying to connect to a remote debugger.

[00:07:44] Go away!
>> Scott Moss: Stop it. That's why it was messing our [INAUDIBLE], paused on an exception, remote debugger. Okay, let me try to exit this without restarting everything. Please just stop. All right, so I'm gonna shut this down again [LAUGH]. I run it one more time.
>> Scott Moss: Everybody see the issue that I ran into?

[00:08:23] It connected to the remote debugger and I clicked a breakpoint and it paused there and I kept clicking on the UI. Refresh, reload, but it was like when you told me the pause, I don't want to do. So the emulator crashes cuz I'm sending these physical commands, but the software is I'm stuck, so what do you want me to do, it just died.

[00:08:47]
>> Scott Moss: So if I run it again, it's gonna connect to the debugger cuz that was the last setting. And all I need to do is go into web and uncheck that right-click. So it doesn't freak out.
>> Scott Moss: There we go. So I'll come in here, go to sources.

[00:09:13]
>> Speaker 2: Couple of questions or problems from the chatroom.
>> Scott Moss: Yes.
>> Speaker 2: David is asking about the ABD command.
>> Scott Moss: Android Device Bridge.
>> Speaker 2: I think it's ADB.
>> Scott Moss: Yeah.
>> Speaker 2: Not ABD.
>> Scott Moss: Yes, Android Device Bridge. So if you install Android on your computer, you'll get this command called Android and you can run it.

[00:09:35] And it will just open up like the Android SDK installer and all the stuff. It also installs this thing called ADB, which is a debugging tool that Android developers use to bridge their device to their computer. So it's a great way to connect devices, enter devices into your computer.

[00:09:50] I use it a lot not just react native development before like adding ROMs and modifications to my Android phone. It's just a way to connect devices to your computer and you're running adb devices, we can detect what devices are attached to our computer. In this case, it's only this emulator one, that is what that's for.

[00:10:09]
>> Speaker 2: Okay, another issue, Mark H is saying he is getting an error with iOS in TabView. Children.forEach is not a function.
>> Speaker 3: Same here.
>> Scott Moss: Same thing, okay. I will run to this issue and we'll probably fix it. Let's see what happens. I've run an iOS before and I didn't have issues, so it should be fine.

[00:10:31] All right. Sweet. So let's reload this, look, I'm getting right now too, so children for each is not a function. Let's just refresh this. All right. So I'm getting the same thing. Let's figure out where this is coming from, if we look, go back at the docks, probably forgot something.

[00:10:55] There we go. So it says here. Scroll over.
>> Speaker 4: [INAUDIBLE] Tab [INAUDIBLE].
>> Scott Moss: You just need more than one tab, yeah. So let's just add a new view here. Just to quiet it. And also, it needs a tablabel. And we'll say other. There we go. What? Come on bro.

[00:11:25]
>> Scott Moss: There we go. So now we have this nice TabView with the Todos. The one that we already had right here on this Todos right here. And then other. If you click on it, it will scroll, so that we can also just slide over with a gesture. And you can see it's native, but it was built in JavaScript, that's crazy.

[00:11:49] If you ever try to do this on my mobile web, you know that this is not easy to do and still be 60 frames per second. That's just not a thing. Cuz the delay on the web with the touch and the dragging is not meant for screens. It's just not gonna be the same, but you can just come in here and you could do this all day and it's like [INAUDIBLE] free.

[00:12:09] No junk there. And it's all javaScript which is amazing, that just blew my mind when I first saw it.