Alex Banks shows us how to make a more robust button using the TouchableHighlight component. Students continue working on the Color List application by improving their user interface.
- [Instructor] In the last lesson, we created a brand new application called The Color List. So far, The Color List will respond to user touches. If a user touches either of these text elements, the background color of the application changes. In React Native there are many components like text components that will respond to touches. In most cases, it's fine to simply add an onPress Attribute to these components. However, there are times when you might need to add a touch event to a group of components, say within a view. Or you may need a component that visually indicates when it was pressed with a highlight.
In this next lesson, we're going to learn to use the Touchable Highlight component to handle these cases. So I still have the application running in the iPhone 6 simulator. I also still have index.ios.js open in Adam. A live reload is still enabled, so if I make any changes to this file, we'll see those changes rendered immediately. So what if we wanted to make this button look cool? Let's say we wanted a button that displays the name of the background color, along with a little sample indicator that shows what that color might look like. What we're going to go ahead and do is go over to the index.ios.js file, and from the Render Method, we're going to Delete the two Text Elements that add our green and red buttons.
We're going to create a cooler-looking button by using several components together. So first, we're going to Group all these Components under a View. And we'll set the Style for this view to a style called Row. So the reason we call this style Row is, it's going to line all of the elements up in a row. The first element that we want to use is a indicator, a little sample of the color, so we'll call this View, and we'll give it the style of Sample. And that will just be a little circle icon with the color in it.
And the next thing we need is the Text that will display the color name. So we'll add Yellow, and we'll make sure this text also has a style. Alright, styles.text. So let's go ahead and add the styles for row, sample, and text. So I'm going to come down here to my Style Sheet, and add some Styles Classes below the button. One for Row. One for Sample. And whoops. And one for Text.
Alright, so we want all of the elements in the row to line up in a row, so we'll going to give it the flexDirection of row. And we'll also give it an alignItems center. Alright, so the sample's a little indicator. What we want this to be is just a little circle that displays the color. So for right now it'll be the color Yellow, give it a Height of 20, a Width 20, a Border Radius of 10, this will make it a perfect circle.
A Margin of five, and for now we'll give it a little Background Color Placeholder of White. And then we just want to give our text some size, so we'll do Font Size 30, and Margin five. Alright, so as we Save this, now we see the word Yellow appear on the screen next to a little white indicator. But the issue is that indicator shouldn't be white, it should be yellow. But I don't want to hard code the color yellow in here. I want the ability to set that value from a property later.
So just like the background, we're going to add multiple styles to the indicator view. So here within the Styles Sample, I'm going to Add an Array, and we're going to make sure that we have the sample style. That's what makes the little circle dot, but we're going to change the background color by adding another style to yellow. And now we can see that we have a little yellow indicator. Alright, so now we want to make all of these elements respond to touch. Now, we wouldn't want to add On-Presses individually to any of these elements. We want to make them all respond to the same touch, so we're going to use a Touchable Highlight for that.
If we go to the top of the page, we can also import a Touchable Highlight from React Native, and I can come down here, and I can surround this entire view of that component. Make sure we have a slash Touchable Highlight. There we go. And now the Touchable Highlight, we will give this the style of Button. And this is the element that will also respond to the press.
So when you press the Touchable Highlight, that's when we will invoke this.changeColor, and this time we'll change the color to Yellow. And then finally, Touchable Highlights also have an underlay color. This is the actual highlight color for this component. So we'll set that as Orange. So, we've basically surrounded a view, which grouped some elements inside of a Touchable Highlight component. And the last thing that we want to do is come down here to the Button Style, and we're just going to go ahead and Remove the Font Size, because that's not a text component any more.
We'll also Remove Text Align from our Button Class. And I'm going to give this Touchable Highlight a Background Color. So, we want to be able to see all the colors clearly. We'll use rgba. So this is red, green, blue in alpha. We'll have a little transparency, that's 255, 255, 255 for White, and then we'll do .8, which is about 80% transparent. So if I go ahead and Save this, we now see a nicer-looking button that groups several components together. When we click on this button, it still responds to the touch, and changes the background color, but it also highlights all of the elements that are grouped under the Touchable Highlight.
Great, now we have a better-looking button.
- How React Native works
- Running an iOS app
- Debugging an app
- Working with components
- Creating style sheets
- Preparing a color list and color info
- Using the navigator
- Fetching data
Skill Level Intermediate
Q: This course was updated on 08/21/2017. What changed?
A: New videos were added that cover Android setup and running the Android emulator. In addition, the following topics were updated: building color info component, fetching data, and incorporating a WebView.