This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Exercise: Adding Tab Navigation" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So that's the Tab interface. So if we go back and look at our app, our designs, it's not gonna be as simple, because our design is actually quite different. And that's because this welcome screen is actually not part of the Tab interface. So how do we go from this welcome screen to the Tab interface?
[00:00:26] Hm, so you gotta figure that part out. It's actually not as hard as you'd think. You don't need a router to do this. It's just not that difficult. There's a couple ways you can do it is, you got to think outside the box. But yeah, so you need to set up a way to navigate from this welcome screen that you just made, regardless if it looks like this or not, that route component that you made.
[00:00:49] And when you click Start Workout it should render a new route component that has a type interface. That's it, that's all we gotta do. Everybody understand the exercise? So you have this component that you already made somewhere in that button when you click on it. However you wanna do it, it just needs to render a new route component.
[00:01:15] And you can call this component Current Workout. Let's save that in the container folder. It needs to render Current Workout, and Current Workout just needs to have two tabs, that's it.
>> Speaker 2: What are the tabs?
>> Scott Moss: They can be whatever you want. They can be whatever you want for now.
[00:01:31]
>> Speaker 2: Got a question about the tab interface. The components you put in the tabs, do they stay mounted all the time?
>> Scott Moss: They do. So there's a way around that. There's a listener on the tab, if you look at the docs, the way I fixed it is, there's a function that's fired whenever a tab is changed.
[00:01:50] And it passes in the current index of the tab. So I take that index and I pass to every single tab a prop called active tab, like if index. So for instance if, so this is index zero, right? So I'll update this state like, currentTab or activeTab is gonna be true if, so I would have to set up some statement here.
[00:02:17] But imagine if I had the state of index, so if this.state.index triple equals 0, which is this state. So this'll be true inside of the component. So then in the component, I would go into this Todo component and I would say, should component render, stuff like that. Or I can come out just to the render function, and I can just do a conditional this.props.activetab.
[00:02:44] True, render this, if not render, an empty view, or nothing, something like that. It depends on what you're doing in the JavaScript. We're not doing any asynchronous stuff in here. But if you were to do asynchronous in here, not only do you wanna block the render, you probably wanna block it from getting all the stuff from the server too, right?
[00:03:01] So yeah, I would do that. And component did mount, or component should mount, or something like that. Only if this prop is active do I wanna go do this stuff. If not, don't do anything, it's totally up to you. But on the other side, maybe you want that stuff rendered before the person slides over.
[00:03:17] So it's up to you, but that's how I do it.
>> Speaker 2: Right, so you see it as it slides in.
>> Scott Moss: So they see it as it slides over, not when it just [SOUND] pops in. But there's ways around that, too. You can have it to where it just, Facebook does on the web is, they render what event, a shell, this is what it's gonna like.
[00:03:31] When it loads, it's just a placeholder. And then it just like fades in gradually, so you could do that too. So many optimizations there, but just by passing in an active tab, you get more control over what tab is what.