React Native Tutorial - 63 - KeyboardAvoidingView

in our last video we built the UI for our login form but as with most things in development there is a common hiccup we run into when dealing with forms in react native let me show that to you first let's make a small change in our UI above the username label I'm going to render an image make sure to import the component from react native Source we're going to require the Adaptive icon from the assets folder dot slash assets slash adaptive icon dot PNG this icon right here we will also add style is equal to Styles dot image and with the stylesheet API a new key image with 200 height 200. align self Center and margin bottom 50. now if we jump back to our UI we can see the form with the Adaptive icon image if we tap on the password field on the iOS device and press command shift K to bring up the keyboard do you notice something off the keyboard completely overlays the input element it's practically invisible and let's be honest this is not a great user experience luckily react native has a solution for us the keyboard avoiding view component let's import it from react native now replace our outermost view container with keyboard avoiding View both opening and closing tags on this component we also set a prop behavior is equal to padding this ensures that the component increases its padding at the bottom matching the keyboard's height let's take a look at our UI tap on password and our form gracefully moves up revealing the input element problem solved well not entirely I'm going to set the image height to 400. now if we revisit our UI you'll notice that the input is hiding again when the keyboard pops up once again we have a fix and that is a prop called keyboard vertical offset setting it to 100 usually does the trick restart the app bring up the keyboard and you can see our view is offset by 100 pixels making our input visible once more but wait there is a tiny problem for our Android users when I tap on the password field you can see there is this unnecessary space that is introduced by the offset so what is the solution well a platform specific offset let's import the platform module and adjust our offset to only apply to iOS devices platform dot operating system is equal to iOS offset by 100 if we restart our application and take a look at our UI we see that the UI is much better on both Android and iOS the keyboard avoiding view can be a tricky component in react native it might test your patience but with the basics we have covered today you're well positioned to deal with it all right in our next video we'll be diving into mandatory field validation for our login form if you found this video helpful don't forget to hit that like button and subscribe for more react native content

Channel: Codevolution

Views: 20,287

Keywords: Codevolution, React, React Native, React Native Tutorial, React Native Tutorial for Beginners, Codevolution React Native, React Native for Beginners, Expo, React Native Expo, React Native Expo Tutorial, Expo Tutorial, Expo Tutorial for Beginners, KeyboardAvoidingView

Id: UcJyQ5MOoJo

Length: 4min 9sec (249 seconds)

Published: Wed Sep 13 2023