SVG vs PNG: Which Image Format to Use in a React Native App

Whether to use an image or an SVG tends to make for an interesting conversation in the React Native world. Should we use an image? Should we use an SVG? Should we put them in native? Or should we bundle them? It always seems to be a confusion. But that's not the case. There are some best practices and we'll look at them in this lesson. First we'll see how images and SVG are used in a React Native app and then from that we can draw conclusions. So images tend to be a raster and we can create some really beautiful scenery and just put in the app though they tend to be of higher size and if we compare them with SVG's the difference is actually exponential. But they are omnipresent as in almost anyone can create an image and we can get a lot of it. SVG's tend to be vectors so they scale well with the different device resolutions. They don't have that issue like for an image on a native app. The solution is to generally upload multiple versions based on device resolution DPI's and till recently we had to upload three versions but it has now upgraded to four versions. SVG's don't have that issue but then if we look at creating an entire picture with SVG that tends to be a very CPU intensive process. So what should we do? This is another dilemma. Should we put them in native or should we bundle them with React Native and send over the air? If we put them in native we are increasing the app size which in turn impacts installs. So the first install that the user is going to do that will get much bigger in size and if we decide that let's bundle them together with React Native then what we do is for images that are not updated that frequently we keep sending them with every update a user that has installed the app now is downloading the multiple bundles with that increased app size. So what should we do? Let's look at how images and SVG's are used in the app and that will help us derive a lot of best practices. Let's see that. So images are quite simple if we will go to the home component we had used images in the icons and values sections right. So this is the image and it's straightforward we have an image tag we can pass tiles to it for height and weight remember these are required if we don't pass this then the image will not show up so they are mandatory and there's a resize mode basically what it tells is do we need to fill the container or contain the image inside the container. Now source has two different ways of defining one is what we see here it's just says the image name and the sample is an image that we have on the native side. So if you recall we added the sample dot png for android under frc main reds and then these are the multiple reliable folders based on different resolutions. So we need to add images of different sizes over here and we can use them for iOS what we can do is we just go to our application and under images dot xe assets we can say right click add an image set and then it will ask us to upload those variations. So this is an example of using an image from the native side if you go to the navigator the tab bar icons are from react native we have images under assets and these are all the images and if we want to use them then this is how we typically do in any JavaScript application we just do a require and the relative part to the image. If we just look at SVG, SVG's are not natively supported by react native. What we're going to do is we are going to use react native SVG for it and it's pretty straightforward. If we are using the version of react native greater than 0.60 we just need to install this library we don't need to do the manual linking which we used to do with react native link and we'll just start consuming it as a normal JavaScript function. Now the step for that is let's say we get an SVG from the design team. What we need to do is convert this into a JavaScript function and there are only tools for that we have this particular website it's called SVG to JSX and you just put in the path over there and it will convert it into a JavaScript function but it's a straightforward process and we'll see how to do that. We'll go to images assets and we'll create a new folder and let's call it SVG's and then we can do a new file in this dot TSX and we'll just say import react we saw this search icon and we're going to use that with copied over. What we need to do is we need to create a simple function for this so let's call it a search and so we'll just return this. Now these tags need to be placed by what we get from the package so what we can do is SVG and we get this from react native SVG. Now we don't need these tags we can have the width and the height but we'll see a way to make this consistent for all the icons we use and how we can do that is we can declare a default so let's declare defaults and we would declare some props for it and we'll have some style let's say that default style is width is 24 and height is 24 and the color is typography dot color dot default default is white that's what we're going to use so let's define the props so we do interface props and we declare style it's not mandatory we'll do view style and then we'll do color we can also say this is non-met tree distance we have already have some defaults and we'll have a string for that so next we just assign this as default props to search and okay so we need to props props okay so now with that we have declared some defaults so this is a pretty static SVG right now how do we change colors for this how do we change height then width for that so before we do that let's render it and see it in action so we'll do sorry we need to export it first so we'll do export default and search that should be good we just import SVG icon from assets dash SVG and we can simply do and swz dot search and that should enter it first let me just do to load the app there is a icon so next if you get how would be change colors and it seems to have taken the size from this one or maybe it's this let's fix that so how would do that is we'll say style equals and we have styles in props so we do props dot style and for color we're going to use that bit fill fi ln equals whatever the color is passed yes okay that should do it let's pass some color to it let's do color equals types typography dot color dot primary and there it is so now we have an icon and we can control its height width and color as we saw the flexibility between the two SVG is tend to be quite light all we have is a simple function that gets bundled and exported over the air whenever we want to send it now they will be sent every time that we send the bundle but let's say even if we have 50 SVG is that we're using cross the application it's still this one file and how much of a size that really is versus images they tend to be much larger right but having said that it doesn't mean that SVGs fit every scenario so let's look at the scenarios and the best practices where images make for a better case and where SVGs would do for a perfect fit so we have the option of either bund ling an image if you put it inside the assets directory in reactative folder it will bundle and go over the air or we can also put them in native so what is the best practice the tab bar icon or the custom icons let's say that we want to have a very custom back button we should try and put that in native and how we decide that is we're not going to change the back button very frequently right so why not bundle it and send it over the launch images are going to be native the tab bar icons can also be on native now they are pretty small and can be sent over the air but app tone generally tend to change the entire navigation in one go so frequently so they would also make for a good use case put them in native then the onboarding journey what that means is whenever our users install the app for the first time they are generally presented with multiple marketing slides and those are images now ideally we'd want to bundle them inside the app for multiple reasons one is they can be a network request but then that doesn't make for a great user experience because that the first impression that a user is going to get up the app right and if you're making a native request it can happen that the image doesn't load and the user never actually sees the image because the user wants to click next and reach the home page as soon as possible so onboarding journey images I would recommend that we put them on native then some of the landing page assets they make for a good use case for bundling into the react native app because they tend to stay for a certain period and change so basically how would decide is based on the frequency of these images being used and the less frequent it's great to put on native and the more frequent it's good to bundle on the react native side haven't said that we should still be careful about bundling these images because they will be sent to user every time the user uses the app and downloads the bundle. SVGs are great for icons as we just saw the render pretty well across device relations we don't need to upload four versions like we need to for images and they're also really good for micro animations which we'll see in one of the later sections where we use latte so as you can see both have their own use cases and these are some of the best practices that we can follow while deciding whether we should use an image or an SVG and where should we really put them on the native side or bundle them. I hope it makes sense now that we have looked how images and SVs are used in an app and it still continues to be an interesting discussion but I'm hoping at the end of this lesson we'll have a lot more clarity. Thank you and I'll see you in the next module.