So, in this guide we're simply going to perform one task which is to convert our authentication form here so that it is a scroll view container. So, what that means is imagine that you have a user that is accessing the device or accessing the app from a very small device, and so what we have here in our simulator may look great but if you have a user that has a older Android device, with a very small screen there's a chance, and I've seen this in some apps I've built, where the user isn't even able to see the login button here or the register button and that obviously would not be a good user experience. They wouldn't even be able to use the app.

So, let's fix that here. My goal is to be able to convert this component so that even if the user is coming on a very small screen, they would be able to scroll up. So, right now with my mouse, I'm trying to click and I'm trying to click and drag and nothing's happening and that's because we're using a basic view for our container.

So, I'm going to close our text formatter and if you look at our off screen all the way down here at the bottom you can see our container is just a standard view. What we want to do if you come all the way up top to our react native imports, I want to add a new import here called scroll view.

AuthScreen.tsx

import {
  ...
  ScrollView
} from "react-native";

And then I'm going to use this, instead of a view tag here at the very bottom. So, I'm going to take where it says authScreenStyles.container, I'm going to make that a scroll view and then make sure that you close that off, hit save.

AuthScreen.tsx

  return (
    <ScrollView style={authScreenStyles.container}>
      ...
    </ScrollView>
  );

And now if you come to this component, do you see how you can actually pull and drag this down. So, this means that if a user is accessing the app from a very small device, they're now going to be able to scroll down and get to the login or the registration buttons.

Now this the scroll view component is something we're going to be using quite a bit throughout this course, so I'd recommend for you to take some time and look through the scroll view documentation so you can become familiar with how it works. Because it may seem like it's incredibly basic, it just gives the user the ability to scroll up and down which it does do that and we are going to be using that throughout this entire course. However, there are more advanced features that it also offers. So, one of my favorites to use, is say that you are building out a feature or a screen, where the user has a set of images and you want them to scroll from right to left. Well the scroll view container is how you do that. So, if you were to build out say a image gallery for an application, you would use the scroll view to allow the user to swipe from left to right and so you can actually create all kinds of really neat behavior using the scroll view.

So, I'd recommend for you to look at the documentation look at some of the props that takes in, some of the options and play with it right here because we're going to be doing that throughout this course and I have a pretty good feeling that as you build out your own native and mobile applications you're going to need to do that as well.

Resources

• Source code