Hello everyone and welcome back.
Today I would like to start this lesson
by going over this warning that I got after recording the last video.
So here is the warning.
It says that we supplied invalid Profile image of type number and we expected
an object and I just want to explain why this happens.
So I just didn't pay enough attention to it when I was setting up the properties.
This Require function for local images
basically helps the bundler like Metro include image assets in the final app
bundle and gets the images ready for display when the app runs,
which makes it more reliable than using dynamic references.
And Require function converts this image
into a number that is used by the source when we directly supply it with something.
For example, if we were using an image
from Internet it would have been an object and it would have been something like
this, it would have been an Uri and then we might have some path to some website
here, but we are using local images, therefore we are going to need Require.
In fact if we don't use Require for example, I delete this for Joseph,
it might seem like it's working but it's actually not going to work.
I'm going to reload this and you're going
to see that image is not going to be displayed here.
So we definitely need this Require but we
do need to change the type of it back to any for example.
And what I also want to talk about is
the fact that we should make this Profile Image reusable and the reason
to make that reusable is because we don't only use it for user stories,
but we're also going to use it in the future for user posts here.
And remember that components in React native are set up because of reusability.
You create a component once and you can use it in any place that you want.
So let's take advantage of that idea
and make sure that we create User Profile Image component.
Now I already created the directory inside the components called User Profile Image.
You can create one yourself.
And we should place User Profile Image JS file here so that we get started
with the component setup and let's import react from React.
We're also going to need prop types.
We already know this and let's just set up the most basics.
Right, let's set up a constant
User Profile Image, make it into a functional component
that accepts props and it's going to return null so far.
Let's make it exportable and let's set up the prop types as well.
It will be User Profile Image prop types and then what do we need here?
We're going to need Profile Image such as
here and let's copy that and paste it here.
And then what we want to do is make sure
that we have the similar setup so that we get the same result here.
So what we can do is literally just copy this whole image container, paste it here.
And now we're not going to see any images
anymore because I'm not using user profile image here.
So I'm just going to delete this component that we don't need anymore.
I'm going to use this user profile image and I'm going to supply it with props
profile image that was passed to this component, I'm going to save it.
And now we see this here.
And the reason we see it here is because
my editor automatically imported the styles of the user story right here.
So if I were to delete this, we would see the stories in a very weird way, right?
Actually style doesn't exist so we're even going to get an error.
So what we want to do instead is set up our own style JS here.
And so that I don't take a bunch of your
time, you can just copy this style JS, paste it here and let's just make sure
that we don't use the styles here that we don't need anymore because this is going
to be connected solely to user profile image component.
So let's delete this and then what we want
to do is make sure that we connect this to this style JS file here.
So now everything is working the same way.
But we also have to remember that we got
to delete these unused styles inside the user story component as well.
So let's just delete this, we don't need it here anymore.
And let's just think about one more fact here, right?
If you see this design,
the profile image here is way bigger than this image given here.
And therefore it would be great if we had a way of dynamically passing
the dimensions of the image and our component, our user profile image
component, to understand dynamically what each dimension should be.
So let's do that real quick.
It's going to be very simple.
What we're going to do is set up one more property here called image dimensions
and let's just grab one number for it and it's going to be required.
And the reason I'm grabbing only one
number is because if you go to the styles of our user profile image here,
you're going to see that border radius, width and height are all the same value.
So what we could do is just delete all
of these styles here and instead set up dynamic styles right inside here.
So we can just say that hey, our width is equal to props image
dimensions and our height is equal to props image dimensions as well.
So this is where inline styles come in handy and then we can do the same here.
We can just add one more item here and say
that border radius is actually going to be equal to image dimensions.
So now what's left to do for us to actually see the image is make sure
that inside the user story we call image dimensions and pass 65 to it.
Now our setup is looking the same way and when we're going to be setting up our
component for the user post we're not going to have any issues because we're
already going to have user profile, image and importing.
It is going to be super simple. So great.
Now our setup looks very high level and we are also going to go over very high
level of a topic in the next video which is going to be infinite scrolling.
I'm super excited so stay tuned and I'll see you in the next video.
Thanks so much for watching.