In this video we're going to create a new reusable component that we're going to call image detail.
This image detail is going to be responsible for just showing one of these individual the old cards
right here.
Let's try this out.
I going to flip back over my code Ed now instead of our code.
Ed specifically inside the S.R. see directory we currently have a folder called screens inside there
we have a bunch of different rack components that are meant to display a full screens worth of content.
So in other words it's like one distinct component.
We want this component and this component alone to be visible on a device.
Any time that we want to make some kind of reusable component that we expect to reuse several times
over we'll create it inside of a separate directory called simply components.
So the idea here is that we're gonna have one set of real components called screens that show an entire
screens worth of content like everything on the device.
And we'll also have a collection of different components called simply components.
And it's going to show just one little portion of what goes on on the screen.
That might sound kind of confusing for right now but over time you're going to really come to learn
the difference between a screen and a reusable component.
OK.
So inside my S.R. directory I'll make a new folder called components.
So inside of here we're going to put all of our different reusable components that we want to show several
times then inside there.
I'll make a new file called Image detail dot J.S. so inside of here we're going to write out the same
boilerplate that we've been using for all of our different screens rather than rewrite it all out from
great detail from scratch.
Right now we can just flip back over to our image screen.
Do a quick select all and copy and then paste that inside of image detail like so.
So I'm inside of image detail and I've got all that boilerplate inside of here we can then fix up the
variable name here.
So rather than creating a function called Image screen I'll call it image detail instead and I'll update
the export default at the bottom as well.
Then finally inside this text element I'm going to change it from Image screen to image detail all right.
So we've now got a screen called Image screen and a component called Image detail.
So now we want to try to show that image detail component several times or we want to show several copies
of it inside of our image screen.
So let's figure out how to do that to show one component inside of another.
We're first going to go into the parent component file.
In this case it's going to be the image screen.
So here's my image screen inside up here we're going to import that component that we want to show several
times.
So at the top underneath my import from React Native I will import Image detail from and we have to
write out a relative path to that component file.
Right now our image screen file is inside the screens directory.
So we have to go up one directory to s RC and into the components directory and then get the image detail
file.
So to do so we will write out dot dot slash to indicate that we want to go up one directory will then
go into the components folder and get the image detail file.
OK.
So we've now imported the child into the parent.
So now to show this child inside of the parent we're going to pretend that this image detail is just
like those primitive elements that we've been making use of from the React Native library.
So we can write out image detail inside of a set of JSA ex tags right now we're showing a single text
element right here inside of image screen because we want to show multiple different image details remember
we always have to return one single root element.
So inside of you are going to place a view and then inside there I'm going to place several copies of
my image.
Detail that's a component that we just created and we want to reuse several times.
So I'll do image detail.
Notice I'm using a self closing tag here because I don't expect to have to pass anything into it.
Then copy that down a couple of times.
Like so now hopefully if we save this and test out our application we should see image detail appear
four times so let's try that.
I'll save it I'll flip back over I'll navigate to the image demo and I'll see image detail repeated
four separate times.
Perfect not to just do a little bit of a further test year and make sure that everything is really working
correctly.
Let's try putting some text inside of here besides image detail.
It's all put in something like show image of forest then save that go back to the image demo screen
and we'll see that new text repeated four times.
Once again OK.
So this looks pretty good.
So we are now showing our image detail multiple times inside of one single parent element.
So now we need to figure out how we can pass some props from the parent down to the child to customize
how this child component displays itself and shows it to a user OK.
So let's take care of that prop stuff in the next video.