React Native (feat. Redux) Adding Tab Navigation Solution

Transcript from the "Adding Tab Navigation Solution" Lesson

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

[00:00:04]
>> Scott: And now we're just gonna go over right quick the solution for the tab navigation. So did anybody figure that stuff out? How to navigate from the non-tab to the tab? Yeah. What did you do?
>> Speaker 2: On my kinda my root component I have a Boolean property that is like show the current workout and then whenever I in my welcome gear, my home view, whenever I click the button, I just trigger an action up that flips that Boolean.

[00:00:34] Then I use that Boolean to either render my home or walk on or current look.
>> Scott: Nice.
>> Speaker 2: Or lay out the current work out.
>> Scott: Nice yeah that it's pretty much what I did too except for I just didn't go through Redux to do that. I just did it locally in a state.

[00:00:50]
>> Speaker 2: Yeah that's what I did too.
>> Scott: Nice. So the way that looks is if we head over to our index inside of our welcome which was my root component, actually, no not here. It's actually in that index.JS, here we go. So in the root what I did was it was it looks like I need components here.

[00:01:12]
>> Scott: So what I did was I made a new state here in the component. And in that state I just have a property called started, this is a boolean. So start is default to false and then I have a method right here called startWorkout so notice I'm using this new syntax to create a method.

[00:01:30] And that's because I don't want to do.bind any more so if I just do this arrow function here. I can just skip the dot bind and just use this arrow function and don't have to that bind but you can still do it and do that bind it's up to you but anyway.

[00:01:44] This method all it does is when called is just set started to true. That's it. So I'm just toggling a Boolean, set it to true defaults to false. And here's where the interesting part comes in. So we pretty much have two entry points to our application we have this welcome screen and then we have the rest of our app which is a tabbed app right?

[00:02:02] So it's like two trees almost where this actually this is like the root and then we have the two leaves but we want both of those to have access to redux just in case on the start screen we wanna like I think we on the designs we have access to.

[00:02:17] If we go back like the last workout. So that means you probably need access to Redux here and that's where it's gonna be stored. So we wanna, this to be in the provider as well. So what I did was I just created a method called render root which takes any component and it's just going to return a is gonna return that component that was passed in wrapped inside the provider with the store.

[00:02:40] And then this is gonna pass in a prop called start workout which is just a function that we set up here that's just setting the state to true. And then down below, all I'm doing here is like okay, if this .state started is true then all I want to do is render the main which is gonna be the tabbed interface.

[00:03:01] So if started it's true render the tabbed interface. If started is false render the welcome interface and in the welcome interface. We're gonna be using this prop to set started to true right? So now. Let's actually run this so we can see. Think I already got it running.

[00:03:22] Looks like I broke it. Let's try it again. So basically all I'm doing is I just have a Boolean on this index root component that's being toggled by the welcome screen and when the welcome screen sets it to true. That's going to change the state in this root which is going to call the render function again, and the render first is like started is true now.

[00:03:44] So now I'm gonna render the tabbed app now, that's it. Just a simple Boolean, any other approaches that people came up with? I'm curious. No, no other approaches? Okay so right now started is false. So I rendered the welcome screen and if we go look back at the welcome screen here on this button press.

[00:04:07] I'm doing props.startWorkout. I'm not doing this.props because I have a stateless function that just receives props if you have a class, then that will be this.props this is just a stateless function so I guess the props, some same props.startWorkout which again is passed in to whatever component is here.

[00:04:26] Component to render. StartWorkout. And component to render's either gonna be Main or the Welcome. Doesn't matter. Right. So I want the welcome one so it does have a prop called startWorkout so on press call that. So if I press this it should set the state to true, the started state to true on here which will then re-trigger a re-render which will then render this Main here.

[00:04:51] Everybody follow me there? Okay cool let's try it. Cool and it did it so now we're on the tabbed interface which is just these two screens here. And now we can't hit the back button and go back because that's not part of this app and the back button Android doesn't do that by default anyway.

[00:05:08] It's crazy. You've got to set that up yourself and then as far as what the tabbed app looks like or looks like it is just a stateless app again I just have a view here. I put my tab at the bottom. And I set it to overlay so it's transparent.

[00:05:26] I bumped up the font size and I was added to texts for the actual tabs and that's it.
>> Scott: Any questions on this?
>> Scott: And I made it a overlay because in the designs it's actually transparent so I just made it transparent here too.