WEBVTT 1 00:00:00.560 --> 00:00:03.980 Hi and welcome to our tutorial on React native scroll view. 2 00:00:04.000 --> 00:00:07.650 The scroll view is an essential component in react native as it allows you 3 00:00:07.680 --> 00:00:11.300 to display large amounts of data on a small mobile screen. 4 00:00:11.320 --> 00:00:13.010 Without it you would have to limit 5 00:00:13.040 --> 00:00:17.340 the amount of data displayed or create complex layouts to display it all. 6 00:00:17.370 --> 00:00:19.380 The scroll view makes it easy to display 7 00:00:19.400 --> 00:00:23.380 large amounts of data while keeping your app user friendly. 8 00:00:23.400 --> 00:00:28.100 The examples of when you might want to use scroll view are displaying a list of items, 9 00:00:28.130 --> 00:00:32.460 displaying a long form with multiple fields, displaying a large image or 10 00:00:32.490 --> 00:00:37.260 displaying a section of content that takes up more space than the screen. 11 00:00:37.290 --> 00:00:41.460 Now let's dive into coding and explore how to use scroll views. 12 00:00:41.490 --> 00:00:44.540 You're now looking at my screen with my editor opened, 13 00:00:44.570 --> 00:00:49.620 my simulator running and my metro bundlers running as well so that we're able to see 14 00:00:49.640 --> 00:00:51.660 all the changes that we make in the simulator. 15 00:00:51.680 --> 00:00:55.340 And I would like to talk to you about scroll views. 16 00:00:55.370 --> 00:00:59.460 In order to use the scroll view you're going to have to import the scroll view 17 00:00:59.490 --> 00:01:02.980 component first and then we're going to place it inside 18 00:01:03.010 --> 00:01:08.460 our safe area view and we're going to use scroll view component here. 19 00:01:08.490 --> 00:01:10.980 So in order to demonstrate how scroll view 20 00:01:11.010 --> 00:01:16.360 works, we're going to have to have some content that becomes scrollable and I'm 21 00:01:16.390 --> 00:01:19.020 going to be using an image component for that. 22 00:01:19.050 --> 00:01:25.180 So let's import the image component and let's use it to display 23 00:01:25.210 --> 00:01:31.060 a cake picture that I have in my assets folder 24 00:01:31.090 --> 00:01:35.780 and then let's give it some style so that we give it some height that's big 25 00:01:35.810 --> 00:01:42.340 enough and let's give it like 500 and the width can be 500 as well. 26 00:01:42.370 --> 00:01:46.290 Let's close this and let's save it. 27 00:01:46.320 --> 00:01:50.740 And now we're able to see our cake here. 28 00:01:50.770 --> 00:01:56.140 So let's say we comment out our scroll view component for a second here. 29 00:01:56.170 --> 00:02:01.180 If we were to place multiple image components here, 30 00:02:01.210 --> 00:02:06.260 you're going to be able to see that we cannot scroll this simulator. 31 00:02:06.290 --> 00:02:10.220 But if we were to put the scroll view back 32 00:02:10.250 --> 00:02:14.860 and save this, we're now going to be able to scroll through it. 33 00:02:14.890 --> 00:02:21.540 So as every component in react native scroll view also has its own props. 34 00:02:21.570 --> 00:02:29.260 And the first prop that I want to discuss with you is a prop called shows vertical 35 00:02:29.290 --> 00:02:32.730 scroll indicator and by default it's set to true. 36 00:02:32.760 --> 00:02:37.260 So if we see this now when we're scrolling on the right side of the simulator, 37 00:02:37.290 --> 00:02:42.780 we are seeing an indicator showing us where we are in the scrolling process. 38 00:02:42.810 --> 00:02:46.700 But if we set this to false when we're going to be scrolling, 39 00:02:46.730 --> 00:02:49.980 we're not going to be seeing that indicator anymore. 40 00:02:50.010 --> 00:02:56.540 If we were to make our scroll view component horizontally scrollable, 41 00:02:56.570 --> 00:03:00.860 which is by default set to false, but let's set it to true now, 42 00:03:00.890 --> 00:03:05.980 we're going to be able to see that we can scroll horizontally instead. 43 00:03:06.010 --> 00:03:10.300 And we also have the indicator here and you have a prop for this as well. 44 00:03:10.330 --> 00:03:12.900 So you could do shows horizontal scroll 45 00:03:12.920 --> 00:03:16.740 indicator and set it to false and then when you're going to be scrolling you're 46 00:03:16.770 --> 00:03:19.260 not going to be seeing the indicator anymore. 47 00:03:19.290 --> 00:03:23.460 One other thing that I want to discuss is how to style the scroll view content. 48 00:03:23.490 --> 00:03:30.060 For this there's a prop that exists called content container style and you could give 49 00:03:30.090 --> 00:03:36.380 it a style object and you could say that let's say background color is red. 50 00:03:36.410 --> 00:03:40.880 Let's give it height greater than our pictures here so let's give it like 600 so 51 00:03:40.910 --> 00:03:45.020 that we have 100 difference to see the background color. 52 00:03:45.040 --> 00:03:46.580 If we save this we're going to be able 53 00:03:46.610 --> 00:03:52.500 to see the red color here below our pictures because our scroll view container 54 00:03:52.530 --> 00:03:56.700 has a greater height than the pictures itself. 55 00:03:56.730 --> 00:04:02.820 And the last thing I want to talk about is how to control what happens on scroll. 56 00:04:02.850 --> 00:04:05.700 So for this you have on scroll 57 00:04:05.730 --> 00:04:11.180 event handler and you can give it a callback function. 58 00:04:11.210 --> 00:04:14.180 And here we're just going to console log. 59 00:04:14.210 --> 00:04:16.140 We are now scrolling. 60 00:04:16.160 --> 00:04:19.260 Let's save this, let's open our terminal 61 00:04:19.280 --> 00:04:24.980 and if we're going to start scrolling every time we press and start scrolling 62 00:04:25.010 --> 00:04:28.900 you're going to be able to see this message here. 63 00:04:28.920 --> 00:04:30.540 So this is just in case you want 64 00:04:30.570 --> 00:04:35.420 to control what's happening when the user starts to scroll. 65 00:04:35.450 --> 00:04:39.500 With the scroll view you can now easily display large amounts of data on a small 66 00:04:39.530 --> 00:04:43.460 mobile screen making your app user friendly and easy to navigate. 67 00:04:43.480 --> 00:04:46.180 Happy coding and see you in the next video.