In iOS, there is no opnionated way of managing interactions between your app view, and intrusive system UI like the keyboard. In this tip, you’ll learn how to create react native views that, when wrapped in a KeyboardAvoidingView component, adjust to accommodate the system keyboard.
Transcript
Okay, so you're done building your application and now you're ready to start testing. On the right side of the screen, you will notice a window showing you my app screen. This is your app and you're done building it and you notice that as you scroll along everything looks good. You go to try to send a message, click on the textbox and notice the keyboard overlays over the textbox. And when you try to swipe away to dismiss that keyboard, you can't.
You swipe back, and eventually it works. Let me show you how to fix that. On the left side of the screen I have a VS Code window open with two files, app.js and home.js. In this case we can ignore app.js as that's just the entry point for our application. Home.js however is the codebase basically used to render this page.
The first function, items, is generating fake messages using faker.js. I generate a fake ID, text and source. The source is a random number between 0 and 1 and I use that number to basically reference this array of two items called sources. Me and you are the items. That's how I'm able to tell the screen whether to render the message on the left or on the right side of the screen, just like typical chat applications.
The main component of the screen is wrapped in a view. This view has an app bar, a list, in this case a flat list, and a bottom app bar. The bottom app bar has the text input that I referenced below. To be able to make the keyboard not overlay over your screen, you want to wrap your component in a React Native component called KeyboardAvoidingView. We're going to do that by uncommenting these two lines, effectively wrapping our view.
There's one thing that's very important for you to note though. KeyboardAvoidingView requires a behavior parameter. The behavior parameter basically tells the view what to do in the event that the system UI would like to overlay or take center stage on your screen. In this case we're telling the view to adjust itself by adding a padding above the system UI, in this case the keyboard. We save our page, click on the text box, and we notice that now we have a padding above the keyboard and our view.
That's perfect. But we still can't dismiss this keyboard aside from swiping back. Let's fix that. In the React Native component called FlatList, there's a parameter that you can use called KeyboardDismissMode. You want to set that value to interactive.
What you're telling React Native in this case is, Be able to detect when people are scrolling across the flat list. When you're able to see that people are scrolling downwards and that scroll action intersects with the system UI, the keyboard, dismiss the keyboard. That's right. Perfect. It works.