In this video we're going to work on our next screen.
So let's get to it.
Let's take a look at a mockup.
OK.
So here's what we're going to try to build.
I want to build three separate sections inside of one screen.
Each individual section is going to show a little picture on the left hand side and then on the right
hand side will be a single word to describe the picture.
So for example the first one might show a picture of a forest.
We'll show the text forest on the right then a beach and beach and a picture of a mountain.
And the text mountain.
Now this might seem like a very simple application but I want to demonstrate a very critical thing to
understand about react.
You see when we start to build this thing out there's a couple of different ways we could do it.
The first easy way that you might think of would be to create a new screen which we've done several
times now.
And inside there just throw all the JSA X required to repeat those three elements three times.
So we would end up with like three it's very similar looking blocks of J.S. X inside of this new screen
component.
Alternatively to save a little bit of code and save ourselves a little bit of effort we could instead
create a separate component and then show that component three times on the single screen each time
we show that component we could pass in some configuration options or props to customize how that component
gets displayed so in other words we might create one new component called Image screen and then separately
we might create a new component called Image detail.
This image detail thing would be responsible for showing one of these individual cards that has a image
and some text next to it now.
Each of these image detail components would probably need to show a different image in some different
piece of text.
So we could customize how these different components are displayed by passing them some props from the
image screen down to the image detail so let's give this a shot along the way you're going to learn
a lot around making reusable components and passing down props to customize how they work.
All right.
So I'll flip backward my code Ed the first thing I'm going to do is create a new file inside my screens
directory and I'm going to call this image screen.
J.S. and inside of here we'll put together a little bit of boilerplate so let's say import react from
react I'll import view text and style sheets from react native.
I'll do a const image screen and for right now inside that function I would return just a little piece
of text that says like image screen after that and create a style sheet.
And then finally we will export default the image screen.
OK.
So again that's a little bit of boilerplate that we're going to get very used to writing out as we're
going to essentially write that out for every single component we ever create.
All right.
Now remember if we want this to actually show up on our screen or inside of our application we need
to wire that thing up to our app dot J.S. file.
So as a little exercise I would like for you to try to wire up that new screen this image screen thing
right here to our app dot J.S. file after connecting it to the app dot J.S. file tried to display a
button to navigate to that new screen from the home screen.
Zoe essentially duplicate the current button element that we have right here inside of our home screen
and make sure that it navigates over to the new image screen that you have connected to this Navigator
as usual.
This is 100 percent optional.
If you don't want to do this on your own.
No problem.
Just skip over to the next video.
All right.
So go ahead and give it a shot and I'll see you in just a minute.