React Native Tutorial #13 - Dismissing the Keyboard

Key Takeaways

okay then gang so there's one more little thing I want to do to this out before we move on and talk about flexbox and that is this if currently I start to type something over here a lot of the time when you're on your phone if you click away from the keyboard then it should close the keyboard and the minute I have to press this but not every device has that I suppose and I would like to be able to just click over here like if I click in here again click over here or up here or here and the keyboard is dismissed so it goes away so how do I do that well there's a simple way we can do this so I'm in up J S at the minute and we're returning this component JSX right this is the surrounding container view of everything right here now what I'm going to do is wrap this thing so the whole kind of application if you like with another component and that component is going to be a touchable component now we've already seen these we've seen a touchable opacity component and we can add an unprecedented that this touchable component is going to be slightly different it's going to be called touchable without feedback so when we press something or when we press whatever is inside this touchable component then it won't start to affect the opacity of what's inside it that's what without feedback means so first of all we need to import that and I can do that up here switchable without feedback now we need to import one more thing as well and that is going to be the keyboard because ultimately we're going to be using this keyboard object right here to dismiss the keyboard so first of all we want to surround our entire component with that touchable without feedback component so up here I'm gonna say touchable without feedback like so and take the closing tag and paste it all right at the bottom like that and scoot this in a little bit now we can add on and on press handler right here and this is going to be an anonymous front like so so what I'm gonna do first of all is console dot log and then we'll just say dismissed keyboard now we've not dismissed it at the minute I'm just logging this to show you whenever we click on anything now in this screen because this touchable without feedback component surrounds everything so we can touch anywhere on this screen now then it's going to fire this function and then this should be logged to the console so let me save that and now if I click here then we should see if I go to this thing over here dismissed keyboard let me try somewhere else up here in the header and you can probably hear that little click as I do that dismissed keyboard so now we can listen to touch events everywhere right and what we want to do at this moment in time is actually dismiss the keyboard so if I open this up if I touch over here I want it to move that thing down the keyboard now that's why we imported this keyboard thing at the top right here we can use this now to dismiss the keyboard by saying down here keyboard where the caps okay dots dismiss so this method dismisses the keyboard so now if I start to type something but then click away and it dismisses the keyboard it brings it back down let's try that again bring it up click over here dismisses the keyboard awesome so there we go my friends that is pretty much this app done now right so in the next video what I want to do is move on and talk about flexbox and in fact what we'll do is we'll apply what we learn about flexbox to this app so that we can maybe add something else to it in the future but first of all let's learn about the basics of flexbox in the very next tutorial