- Coding Videos/
- React /
- Tutorial React Native 028 – Using Network Images
Tutorial React Native 028 – Using Network Images

Download Video link >
Tutorial React Native 028 – Using Network Images
View Comments source >
Transcript view all >
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
Leave a Reply