We've now got a component put together that we can use to experiment with listen.
So let's get a better idea of how we build a list with react.
OK.
So here's the general idea.
We're always going to start off with some array of records that we're going to want to represent on
the screen in some fashion.
So this might be an array of objects where each object has maybe a Name property so maybe every object
inside of here represents a friend or something like that.
We could also have an array of numbers or an array of strings or an array of absolutely anything.
But in general when we are building up a list with React Native our starting point is an array an array
that we want to build out into a series of different React Components and show to the user in order
to take an array like this and turn it into a series of React Components.
We're going to use another one of those primitive elements from React Native the primitive element we're
going to use is called The Black List.
So we're going to use the flat list primitive element to take an array of records and turn it into some
list to display on the screen of our device when we make use of the flattest element.
We're always going to pass in two different props.
Remember props are configuration options so we specify when we write out a J OSX element the first required
prop is called data.
So we have to pass in an array of records.
So we want to turn into a collection of React elements to show on the screen now flat list doesn't technically
just figure out for us how to display each of these different elements.
Instead it's up to you and me to provide a function called the render item prop that's going to be called
with every individual element out of that array and it's going to be up to you and me to return from
that function a little bit of J.S. X that describes how we want to show each element on the screen.
We'll see how to write that out in just a moment because when I use words to describe that it's a little
bit confusing.
Now last thing I want to mention really quickly is if you're coming from a world of React J.S. from
the web you might be used to mapping over an array of data to build out a list.
So in the react native world rather than doing that we use the flat list element instead.
And the reason for that is that the flat list has a bunch of optimizations built into it to render a
huge list of elements on a mobile device and a very performance fashion and we'll describe how that
optimization works in just a little bit okay.
So now that we've introduced the flat list element we'll take a quick pause and then come back to our
list screen the next video and get a better idea of how to use it.