React Native: TabBarIOS Basics

[00:00] Hey, guys. In this video, we're going to talk about TabBarIOS, which is a component available in React Native that allows us to create tabbed interfaces.

[00:08] We're starting off with the React Native boilerplate code. I'm going to go ahead and remove the existing component, and replace it with an ES6 component.

[00:18] Here, in the return of our render method, we are going to return a TabBarIOS component. I'm going to go ahead and save that. On the right here, we can see we've actually, already got our tab bar. That's pretty easy.

[00:31] To get our tabs, we're going to need TabBarIOS.Item. When I save that, nothing's really changed here. We don't have anything in our individual tab. To get that started, I'm going to use something called "systemIcon."

[00:44] I'm going to give this a value of "History." We can see we now have an individual tab with this icon and label of "History."

[00:56] If I bring up the React Native documentation, you can see systemIcon is just an enumeration. We've got a bunch of these available, Bookmarks, Contacts, Download, and so on. We're going to go ahead and create a few of these.

[01:08] We'll make this second one Bookmarks. The last one, we'll just set to More. I'm going to save that. We can see very quickly we've been able to create our tabbed interface. However, we can't click on any of these. There's no cycling through our individual tabs.

[01:26] To resolve that, we need to know which tab is selected. Here, in our constructor method, I'm going to call "super" in order to get our context. I'm going to go ahead and create our state. We're going to have a value of "selectedTab." I'm going to set that equal to Tab 1.

[01:45] I'm also going to create a method called "setTab." This will allow us to update our state. It's going to take in a tabID. We're simply going to set our state of selectedTab to that tabID. Now, down here in our tab IOS items, I'm going to break this out a little bit, just so we can read it.

[02:08] For each of these, we're going to have a selected prop equal to this.state. selectedTab is equal to...we're going to have a tabID for each one of these. This one's going to be Tab 1. This will be Tab 2. This will be Tab 3.

[02:23] We're also going to create an onPress event for each of these guys. That'll be onPress equals...this'll be a function that simply calls this.setTab and passes in that ID. Again, for this, it'll Tab 1. Here, we'll have Tab 2. Finally here, we'll have Tab 3.

[02:47] When I save that, we're going to get an error here. onlyChild must be passed a children with exactly one child. That's a little bit confusing. What it's basically telling us though is that we don't have anything inside of our components or our tabs.

[03:03] Inside of each one of these, we're going to have a View. Inside of each of those, we're going to have a Text component. In our first one, we're going to say, "Tab 1." In our second, we'll say, "Tab 2." In our third, we'll say, "Tab 3." Go ahead and save that and reload it over here.

[03:21] Now, we actually have clickable, selectable tabs. You can probably just barely make it out, but we do have our content changing up there. That's not very pretty. What we're going to do is we're going to jump over here, to our Views. We're going to give each of those a style property equal to styles.tabContent.

[03:44] On our Text component, we're going to say, "style = styles.tabText." We'll go ahead and create those now. We'll just keep it nice and simple. tabContent will be flex one. alignItems, center. tabText, we'll give that a margin of 50 and a font size of 45. Save that.

[04:14] Now, we've got our nice, big Tab 1 right there. We can cycle through these. Our Tab component, our TabBar component, is complete.