Tutorial React Native 028 – Using Network Images

00:01 in the last section we imported our

00:04 image like this from our assets folder

00:07 now let's say we don't have the image

00:09 there instead we want to import it right

00:12 from the web now for that I can copy the

00:16 image address from the web and of course

00:18 you shouldn't really do deep linking

00:20 like this to any images you don't own

00:22 but here I'll just briefly do this for

00:24 demo purposes so let's say I don't want

00:27 to use my static import but the web

00:29 import therefore place image here isn't

00:33 set anymore because I just removed the

00:35 import which set this constant instead

00:38 here we have to construct this magic

00:40 object on our own and surprisingly

00:43 that's not difficult at all it's just a

00:45 JavaScript object and this needs to have

00:47 one property at least the URI property

00:51 this now is the path to the image and

00:54 here I'll copy in the path to the image

00:56 in the web now the magic thing that

00:58 happened prior to this is the react

01:01 native determined this path

01:02 automatically and it took the path of

01:05 where the image would end up in the end

01:06 once we ship this to the native device

01:09 here we fetch it from the network so

01:11 from a website so this path is always

01:14 correct anyways and there is no path

01:17 transformation needed so now we can

01:20 already save this and go back to our

01:23 application reload just to really see

01:26 that it works

01:27 select myriad this looks good and one

01:31 important thing to notice is that here

01:34 when fetching an image from the web we

01:37 absolutely have to set height and width

01:40 for the local the static image we didn't

01:43 have to do that it just was too big but

01:46 theoretically we could have relied on

01:48 react native to auto calculate that when

01:51 fetching image from the web react native

01:53 has no way of calculating this for us so

01:56 we have to hard code it we have to set

01:58 height and width as we do here and this

02:01 is your alternative approach for

02:02 fetching images now as I mentioned feel

02:05 free to go to the official documentation

02:07 and there under guides here the general

02:11 guides you can click on images to learn

02:13 more about it we will

02:15 also lose images throughout this course

02:17 for example all the images from the

02:19 camera one important thing you can for

02:21 example dive into our different image

02:24 dimensions if you do provide some static

02:27 images in your app you can use the add

02:29 to X at free X and so on suffixes on the

02:33 image file names to make sure that react

02:36 native automatically picks the right

02:37 image for a given device ratio and ever

02:40 given device size right now I won't do

02:42 this but that is something I want to

02:44 make you aware so with that we added our

02:47 image that's nice and just for

02:50 completeness sake let's all to view this

02:52 on iOS

02:54 let's reload once here since this seems

02:58 to be stuck this looks good so this is

03:01 how we can display images now I said I

03:05 want to show a modal when you click on

03:07 such a item here and then actually show

03:09 the image there and maybe even add a

03:11 delete button there so that we can

03:13 delete the element from within the modal

03:15 let's take care about this over the next

03:18 lectures