WEBVTT 00:00:00.160 --> 00:00:01.820 Hello everyone and welcome back. 00:00:01.840 --> 00:00:03.780 Today I would like to start this lesson 00:00:03.810 --> 00:00:07.980 by going over this warning that I got after recording the last video. 00:00:08.010 --> 00:00:09.580 So here is the warning. 00:00:09.610 --> 00:00:14.580 It says that we supplied invalid Profile image of type number and we expected 00:00:14.610 --> 00:00:17.860 an object and I just want to explain why this happens. 00:00:17.880 --> 00:00:22.540 So I just didn't pay enough attention to it when I was setting up the properties. 00:00:22.570 --> 00:00:26.060 This Require function for local images 00:00:26.080 --> 00:00:30.940 basically helps the bundler like Metro include image assets in the final app 00:00:30.970 --> 00:00:36.340 bundle and gets the images ready for display when the app runs, 00:00:36.370 --> 00:00:40.020 which makes it more reliable than using dynamic references. 00:00:40.050 --> 00:00:43.700 And Require function converts this image 00:00:43.730 --> 00:00:50.940 into a number that is used by the source when we directly supply it with something. 00:00:50.970 --> 00:00:53.540 For example, if we were using an image 00:00:53.570 --> 00:00:57.540 from Internet it would have been an object and it would have been something like 00:00:57.570 --> 00:01:02.620 this, it would have been an Uri and then we might have some path to some website 00:01:02.650 --> 00:01:07.980 here, but we are using local images, therefore we are going to need Require. 00:01:08.010 --> 00:01:13.380 In fact if we don't use Require for example, I delete this for Joseph, 00:01:13.400 --> 00:01:16.210 it might seem like it's working but it's actually not going to work. 00:01:16.240 --> 00:01:17.760 I'm going to reload this and you're going 00:01:17.760 --> 00:01:20.130 to see that image is not going to be displayed here. 00:01:20.160 --> 00:01:22.740 So we definitely need this Require but we 00:01:22.770 --> 00:01:27.700 do need to change the type of it back to any for example. 00:01:27.730 --> 00:01:29.740 And what I also want to talk about is 00:01:29.770 --> 00:01:34.100 the fact that we should make this Profile Image reusable and the reason 00:01:34.130 --> 00:01:38.100 to make that reusable is because we don't only use it for user stories, 00:01:38.130 --> 00:01:42.140 but we're also going to use it in the future for user posts here. 00:01:42.170 --> 00:01:48.660 And remember that components in React native are set up because of reusability. 00:01:48.690 --> 00:01:52.780 You create a component once and you can use it in any place that you want. 00:01:52.810 --> 00:01:55.100 So let's take advantage of that idea 00:01:55.130 --> 00:01:58.570 and make sure that we create User Profile Image component. 00:01:58.600 --> 00:02:03.620 Now I already created the directory inside the components called User Profile Image. 00:02:03.650 --> 00:02:05.260 You can create one yourself. 00:02:05.290 --> 00:02:10.660 And we should place User Profile Image JS file here so that we get started 00:02:10.690 --> 00:02:15.340 with the component setup and let's import react from React. 00:02:15.370 --> 00:02:17.300 We're also going to need prop types. 00:02:17.330 --> 00:02:21.020 We already know this and let's just set up the most basics. 00:02:21.050 --> 00:02:22.860 Right, let's set up a constant 00:02:22.890 --> 00:02:26.340 User Profile Image, make it into a functional component 00:02:26.370 --> 00:02:29.820 that accepts props and it's going to return null so far. 00:02:29.850 --> 00:02:35.380 Let's make it exportable and let's set up the prop types as well. 00:02:35.410 --> 00:02:41.220 It will be User Profile Image prop types and then what do we need here? 00:02:41.250 --> 00:02:44.100 We're going to need Profile Image such as 00:02:44.130 --> 00:02:47.900 here and let's copy that and paste it here. 00:02:47.930 --> 00:02:50.400 And then what we want to do is make sure 00:02:50.430 --> 00:02:54.140 that we have the similar setup so that we get the same result here. 00:02:54.170 --> 00:03:01.660 So what we can do is literally just copy this whole image container, paste it here. 00:03:01.690 --> 00:03:04.060 And now we're not going to see any images 00:03:04.090 --> 00:03:07.660 anymore because I'm not using user profile image here. 00:03:07.680 --> 00:03:10.900 So I'm just going to delete this component that we don't need anymore. 00:03:10.930 --> 00:03:15.610 I'm going to use this user profile image and I'm going to supply it with props 00:03:15.640 --> 00:03:20.020 profile image that was passed to this component, I'm going to save it. 00:03:20.050 --> 00:03:21.580 And now we see this here. 00:03:21.610 --> 00:03:24.140 And the reason we see it here is because 00:03:24.170 --> 00:03:30.610 my editor automatically imported the styles of the user story right here. 00:03:30.640 --> 00:03:35.980 So if I were to delete this, we would see the stories in a very weird way, right? 00:03:36.000 --> 00:03:39.180 Actually style doesn't exist so we're even going to get an error. 00:03:39.210 --> 00:03:43.820 So what we want to do instead is set up our own style JS here. 00:03:43.840 --> 00:03:45.660 And so that I don't take a bunch of your 00:03:45.690 --> 00:03:51.060 time, you can just copy this style JS, paste it here and let's just make sure 00:03:51.090 --> 00:03:55.780 that we don't use the styles here that we don't need anymore because this is going 00:03:55.810 --> 00:03:59.700 to be connected solely to user profile image component. 00:03:59.730 --> 00:04:02.120 So let's delete this and then what we want 00:04:02.150 --> 00:04:06.220 to do is make sure that we connect this to this style JS file here. 00:04:06.250 --> 00:04:09.060 So now everything is working the same way. 00:04:09.080 --> 00:04:10.960 But we also have to remember that we got 00:04:10.990 --> 00:04:14.860 to delete these unused styles inside the user story component as well. 00:04:14.890 --> 00:04:18.100 So let's just delete this, we don't need it here anymore. 00:04:18.130 --> 00:04:21.380 And let's just think about one more fact here, right? 00:04:21.410 --> 00:04:25.340 If you see this design, 00:04:25.360 --> 00:04:30.860 the profile image here is way bigger than this image given here. 00:04:30.890 --> 00:04:36.020 And therefore it would be great if we had a way of dynamically passing 00:04:36.040 --> 00:04:41.380 the dimensions of the image and our component, our user profile image 00:04:41.410 --> 00:04:46.300 component, to understand dynamically what each dimension should be. 00:04:46.330 --> 00:04:47.980 So let's do that real quick. 00:04:48.010 --> 00:04:49.740 It's going to be very simple. 00:04:49.770 --> 00:04:55.540 What we're going to do is set up one more property here called image dimensions 00:04:55.570 --> 00:04:59.620 and let's just grab one number for it and it's going to be required. 00:04:59.650 --> 00:05:01.820 And the reason I'm grabbing only one 00:05:01.840 --> 00:05:06.660 number is because if you go to the styles of our user profile image here, 00:05:06.690 --> 00:05:11.740 you're going to see that border radius, width and height are all the same value. 00:05:11.770 --> 00:05:14.300 So what we could do is just delete all 00:05:14.330 --> 00:05:19.820 of these styles here and instead set up dynamic styles right inside here. 00:05:19.840 --> 00:05:24.700 So we can just say that hey, our width is equal to props image 00:05:24.720 --> 00:05:32.700 dimensions and our height is equal to props image dimensions as well. 00:05:32.730 --> 00:05:37.980 So this is where inline styles come in handy and then we can do the same here. 00:05:38.010 --> 00:05:41.740 We can just add one more item here and say 00:05:41.770 --> 00:05:47.060 that border radius is actually going to be equal to image dimensions. 00:05:47.090 --> 00:05:51.720 So now what's left to do for us to actually see the image is make sure 00:05:51.750 --> 00:05:57.300 that inside the user story we call image dimensions and pass 65 to it. 00:05:57.330 --> 00:06:01.620 Now our setup is looking the same way and when we're going to be setting up our 00:06:01.650 --> 00:06:05.980 component for the user post we're not going to have any issues because we're 00:06:06.010 --> 00:06:08.940 already going to have user profile, image and importing. 00:06:08.970 --> 00:06:11.820 It is going to be super simple. So great. 00:06:11.850 --> 00:06:18.380 Now our setup looks very high level and we are also going to go over very high 00:06:18.410 --> 00:06:22.740 level of a topic in the next video which is going to be infinite scrolling. 00:06:22.770 --> 00:06:26.620 I'm super excited so stay tuned and I'll see you in the next video. 00:06:26.640 --> 00:06:27.640 Thanks so much for watching.