WEBVTT

1
00:00:00.560 --> 00:00:02.220
Hi and welcome to this video.

2
00:00:02.250 --> 00:00:06.530
Today we're going to be talking about how
to implement this component here

3
00:00:06.560 --> 00:00:11.300
that displays your friends'
stories in our application.

4
00:00:11.330 --> 00:00:15.700
So for this, we're going to be needing
something called a flat list component

5
00:00:15.730 --> 00:00:19.620
and we haven't discussed it yet,
so I would like to introduce it to you.

6
00:00:19.650 --> 00:00:24.300
A flatlist is a component in react native
that is used to render a list of items.

7
00:00:24.330 --> 00:00:26.540
It's an optimized version of the standard list

8
00:00:26.570 --> 00:00:29.780
view that is more efficient
for large lists of items.

9
00:00:29.810 --> 00:00:33.660
Flat lists are used to display lists
of data that are either vertically or

10
00:00:33.680 --> 00:00:37.060
horizontally scrollable,
and they are a very powerful tool when it

11
00:00:37.090 --> 00:00:41.460
comes to building efficient, performant
and user friendly mobile applications.

12
00:00:41.490 --> 00:00:44.820
So what makes flat lists
so useful in react native?

13
00:00:44.850 --> 00:00:48.500
First of all, flatlists are
optimized for performance.

14
00:00:48.530 --> 00:00:52.340
When you have a large number of items
to render, a flat list can be

15
00:00:52.370 --> 00:00:55.300
significantly faster than
a standard list view.

16
00:00:55.320 --> 00:00:59.060
This is because a flatlist only renders
the items that are currently visible

17
00:00:59.090 --> 00:01:03.460
on the screen instead of rendering
all of the items in the list at once.

18
00:01:03.490 --> 00:01:06.210
Second, flat lists are
highly customizable.

19
00:01:06.240 --> 00:01:07.770
You can define the styling,

20
00:01:07.800 --> 00:01:11.620
interaction and behavior of each item
in the list, which makes it possible

21
00:01:11.650 --> 00:01:15.740
to create beautiful
and responsive user interactions.

22
00:01:15.770 --> 00:01:18.260
You can also add headers and footers,

23
00:01:18.290 --> 00:01:22.740
set up lazy loading, and even implement
pull to refresh functionality.

24
00:01:22.770 --> 00:01:26.140
Finally, flatlists are also
easy to use and manage.

25
00:01:26.170 --> 00:01:27.930
You can control the number of items

26
00:01:27.960 --> 00:01:30.980
displayed on the screen
and the way they are displayed.

27
00:01:31.010 --> 00:01:35.420
You can also update the list dynamically
as the user scrolls through it.

28
00:01:35.450 --> 00:01:37.705
In conclusion, flatlists are an essential

29
00:01:37.905 --> 00:01:39.850
components in react native for building

30
00:01:39.880 --> 00:01:43.490
efficient, performant and user
friendly mobile applications.

31
00:01:43.520 --> 00:01:46.840
And we're going to be using
to build ours right now.