Name: React Native: TabBarIOS Customization
Uploaded: 2015-07-14T22:12:43-05:00
Description: In this lesson we'll look at some simple ways to customize TabBarIOS, creating a scrollable tab area, and implementing custom icons in TabBarIOS.Item.

In this lesson we'll look at some simple ways to customize TabBarIOS, creating a scrollable tab area, and implementing custom icons in TabBarIOS.Item.

https://app.egghead.io/api/v1/lessons/react-react-native-tabbarios-customization/subtitles

React Native: TabBarIOS Customization

[00:00] Hey, guys. In this video we're going to talk about customizing our TabBarIOS component, as well as working around some of its limitations. One of the simplest customizations can occur right here in the TabBarIOS tag, where we can parse in a "bar tint color" and we just parse that in, a color. Save that and we can see that now, our tab bar is actually black.

[00:23] Another one that we can implement right here is a tint color, which will change the color of our selected icon and its text. We'll just say "white." Now we can see we've got a white tint for the selected icon and its text.

[00:40] One limitation of the tab-bar view-area is that it is not scrollable. I'm going to go ahead and paste in 2, 3, 4, 5, 6, 7, 8, 9, 10 text components. When I save that we can see five of them and we cannot scroll to see the remaining five.

[01:00] To solve that we're going to bring in "scroll view" and we're going to go ahead and ramp our view in the "scroll view." We'll save that and now we can scroll through all these guys. We can see all of our content. A pretty simple fix.

[01:16] The next thing we'll take a look at is "system icon." "System icon" is super easy to use but it's very, very limited. You pass in the icon that you're looking for, and it is going to fix both the icon and the text. However, we can set our own title. I'm going to say "egghead" right here. Save that. Now we do get the "egghead" label right there, but we don't have an icon.

[01:38] In order to incorporate our own custom icon we need to bring up Xcode. Here in our applications directory there's another directory called "images.xcassets" and I've got an icon in a PNG format here. I'm going to drag that right here. What you'll see is initially it drops it into this "1X" area.

[01:59] What I want to do is drop it into this "2X" area, because my particular icon happens to be 50 pixels by 50 pixels. If we bring up Apple's icon- and images-size documentation, we see this first column is "3X", these next three are "2X" and this last one is "1X."

[02:18] We scroll down here to "tab bar" icon. We can see that for "2X" we want our icon to be about 50 by 50 pixels. In order for this to take effect, for us to have access to the asset, we're going to need to stop and restart our application.

[02:33] Here in our code we're going to add a prop of icon, which is going to be an interpolated value of "require," then a string of "image!" and then the name of our asset without its file extension. I'm going to go ahead and save that. You can see we now have our "egghead" icon there.

[02:50] One last thing we can take a look at is the "badge" properties. "Badge equals," and we'll start off with a number. We'll say four. Save that. We get this little red bubble here indicating that we have four of something.

[03:04] We can also do a string but, again, we're going to be pretty limited. We could do something like "new." That fits pretty well. Once we go overboard with that you can see we're clearly running out of space in that red bubble. If we're going to do a string, it's best to keep it to something very simple.

React Native: TabBarIOS Customization

Share this video with your friends