This video is available to students only

Images and SVGs

Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.

One important decision while building a React Native app is whether you should put an image in a React Native bundle and serve it over-the-air (OTA), i.e. with the React Native bundle, or put it in native and save bundle size. The answer depends on the use case, and we'll look at some pointers that can help us come to that decision.

SVGs#

SVG or Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVGs play an important part in getting that pixel-perfect rendering on any device resolution. In React Native, SVGs help with a lot more than just rendering icons, and can help render micro-animations too. We'll see how to do that in the Bonus Lottie section.

Be careful though; SVGs are XMLs and can require a lot of computation, so in complex cases, they may render well on high-end devices but have performance issues on low spec ones, especially Android devices. Remember to test on the devices of your user base before pushing to them.

SVGs are not natively supported by React Native. We will be using the library react-native-svg for the same. Details of its implementations are covered in the Bonus Content's React Native SVG section. For now, we can safely assume that these will be used as simple React components.

Images#

As discussed in the Icons and Badges lesson, images in apps are generally uploaded in three versions, demo_image.png, [email protected] and [email protected] (or other supported formats such as .jpg). This is done to support higher dpi devices. If you add only the @3x version image, the application will be able to resize that for 1x and 2x device needs, so, I recommend adding only the 3x resolution image. So, I recommend adding only the 3x resolution image - you don't need to include that in the file name though.

To upload a home.png image of resolution 22 x 20, instead of uploading three versions e.g., 22 x 20, 44 x 40 and 66 x 60, just upload a single image home.png with size 66 x 60.

Start a new discussion. All notification go to the author.