Use Images in a React Native Application

[00:00] Now what we're going to do in this video is we're going to clean up our Dashboard component. We're going to need two more components here. We're going to need the Image component, and we're going to need the TouchableHighlight component.

[00:14] We've used TouchableHighlight before. This is a reminder. It's basically just a wrapper for making views respond properly to touches. Image is...It's an Image component that's going to allow us to throw in images.

[00:25] If we go down here, to our render function, let's throw in an Image. An Image takes in a source. If that source if coming from a URL, you're going to have a uri property, and then the value is going to be the URL that the Image is located at.

[00:47] Ours is on our userInfo object we're passing in. They key is avatar_url. Before we finish, let's go ahead and add a style that's already been made for us. Let's verify we're good there. If we run this, search for "tylermcginnis," there we go. We get the picture now.

[01:13] Now what we need to do is...If you remember, in the actual app, we had three buttons we could click. One of them took us to the profile page. One of them took us to the repos page. The other one took us to the notes page.

[01:28] Let's go ahead and build those right now. Let's keep style blank for now. We're going to have "onPress =." We'll make a goToProfile function. We'll bind this so we get the appropriate context, and then our underlayColor is going to be...Then we'll have some text in here, and then the style on this as well is going to be styles.buttonText.

[02:04] This should give us our first button. We need to close TouchableHighlight. I'm going to copy this. We're going to have it two more times. Instead of goToProfile, on the second one, let's go ahead and have it goToRepos, and then this last one will have goToNotes.

[02:30] There are a few ways that you can make the backgrounds different colors on these. What I'm going to do is I'm going to write a function which will, depending on the number you pass in...It's going to be zero, one, or two.

[02:46] goToProfile is going to be zero, goToRepos is going to be one, and then goToNotes is going to be two. That's going to return us an object which is going to style the specific button as well as that background color.

[02:57] Let's go up here. At the top of our class, let's make a makeBackground function. It's going to take in which specific button we're using, and then we're going to have a style object. Don't worry too much about this. This is just Flexbox stuff.

[03:18] We're going to do flexDirection row, alignSelf stretch, justifyContent center, and flex of one. Then what we'll do is we'll say, "If button equals zero. Else if button equals one. Else button." If button equals zero, then that means it's going to be the profile button. We're going to set the background color on this object to be four.

[04:05] If it's the view repos button, the background color's going to be E77AAE. If it's neither one of those, that means it's the notes button. Let's set the background to be 758BF4. Then we're obviously going to need to return our object.

[04:34] Now what we can do is down here, we can set the styles equal to whatever gets returned from calling makeBackground. We're going to pass in zero, and then this style...Style, not styles...is going to be whatever gets returned from passing in one.

[05:00] This style is going to be whatever gets returned from passing in two. These are on the instance itself around the class, so we need to add the "this" keyword to those.

[05:16] Now let's go ahead and add just some functions so this doesn't error out. We're going to first create goToProfile, which is just going to...Let's do console.log "Going to Profile Page." Then we'll make the goToRepos function, which will console.log "Going to Repos." Then let's do goToNotes, which is going to console.log "Going to Notes."

[05:58] Test this out. I enter in a username. We get an error. Did you mean style? I did. Let's change that out. Let's recompile this. Now let's search for it. There we go. We get three different buttons. We need to change "Profile" in each one. This is going to be "View Repos." This will be "View Notes." Let's check that out. Very cool.

[06:37] Now what we'll need to do is inside of these functions, just like we did with our getBio function right here, we'll need to push. We'll need to take each one of those buttons to a new component, but those components haven't been built yet. We'll leave these as console.logs, for now, as we go and we build the Notes component, the Repos component, and the Profile component.