Use State and Touch Events in React Native

[00:00] In this review we'll walk through finishing our main.js component which is this component right here. Notice it's going to have some text, it's going to be able to have an input box which takes in a user name, and then what we need to do is we need some way to capture this touch event, so that whenever someone clicks on search it will then take us to the next component, or the next view.

[00:22] What we're going to need to do is we're going to need to use three more React native components, textinput which allows us to capture input from the keyboard, touchable highlight which is going to allow us to capture a touch of it and do something with that, and then activity indicator ios which will allow us to show or hide a spinner based on some Boolean that we set. The difficult part about building UIs is managing state.

[00:52] That's something React does a really good job with. The principle that react takes is that every component will manage its own state, and it can pass that state and any piece of data down to its children components, which can then use that.

[01:05] What we'll do inside of our React component class is we're going to create a constructor. All this is, is an E6 thing. It will get passed some properties, then what we'll do is we're going to call our react component, or the thing we're extending, which is our react component constructor and we're going to pass it props. Then all we'll need to do is set the initial state of this component.

[01:35] You may have noticed as we're doing the example, is this component is going to manage a user name which is the thing that we'll type into the input box. It's going to manage an isloading Boolean which will allow us to toggle that spinner, and will also manage if false Boolean, which will allow us to show an error message if something bad happens.

[01:59] Now I'll modify our UI a little bit. Instead of this being testing the router, let's change this to the title which is "Search for a Github User." The style it's going to take is style.title which we made up here. Then what we'll need to do is we need to create a new input field, but we need to tie this input field to our state.

[02:35] So the style it's going to take is styles.searchinput which is made above, and then what we'll need to do is the value of this input field is going to be bound to the user name in our state, and then whenever this input field changes, or whenever someone types a new letter, what we'll need to do is we'll invoke a function that we haven't made yet called handlechange which will be able to take in, or which will be able to capture the value that's in the input field, and then update our state with whatever that value is, or whatever that text is.

[03:13] Let's go up here now and in our class let's create a new function called handlechange. It's going to receive an event, and then we'll use this.setstate, the state of this component, or the user name state of this component. Our event.nativeevent.text. Now whenever someone types something into the input field, or they change something with the keyboard, our state will be aware of that and it will update itself.

[03:46] You're asking yourself why we're doing this bind thing here. All bind does is it returns us a new function with the this keyword bound to whatever you pass in. If you're not familiar with the this keyword, or binding, or call, or play, or anything of that stuff, just know that when we do this, it makes the this keyword in handlechange be appropriately context to the this keyword that we want.

[04:15] Regular React with ES6, React will go ahead and autobind all of the this keywords for you, so you don't really have to worry about this. But because we're using ES6 React doesn't do that, so we need to say, "Hey this keyword here, we want it to reference the same thing as this keyword out here."

[04:32] Now let's go ahead and make our search button. What we'll use is touchable highlight component, and we'll have a style of style.button which we made above. We'll have an onPress attribute, what this will do is whenever someone presses on this button, it will go ahead and run this handlesubmit function that we'll create later, and then we'll have an underlay color so that whenever someone is pressing on the button the background will go white.

[05:02] Let's go ahead and nest a text value under here of search, and add a style property on here as well of styles.buttontext. We'll close our touchable highlight component.

[05:27] Now let's go and let's create our handlesubmit function. We're going to add handlesubmit right here. If you think about the purpose of this handlesubmit function, it's going to do a few things. It's going to update our indicator ios spinner, it's then going to go and fetch data from Github, get the user's Github information, and then it's going to reroute us to the next route passing in that Github information.

[06:05] We'll talk all about fetching data using React natives, in this video is what we'll do is we'll go ahead and update the state of our loading, our isloading property on the state to true. Then what we'll do is let's just console.log submit, and then we'll pass along this.state.username. We can see if this is really working, so let's verify if this is working. We have an error main.js line 73, that should not be there. All right.

[06:45] What I'm going to do now, we're comfortable logging something, but we obviously don't have a console in the iPhone simulator, so I'm going to do command-D to open up this debugger window, it opens up the console here. What we expect to happen is when I hit search, there you go. We submit...