Using React Native SVG to Support SVG on iOS and Android

Look no further than React Native SVG for your SVG solution.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the The newline Guide to React Native for JavaScript Developers using TypeScript course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to React Native for JavaScript Developers using TypeScript, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to React Native for JavaScript Developers using TypeScript

  • [00:00 - 00:11] All the SVGs that we have used so far in the app have been rendered using React Native SVG. So as we can see it's quite a popular solution and it's quite widely used in the React Native community.

    [00:12 - 00:29] It's quite easy to use. We are able to declare SVGs as components and then simply use them. It also provides quite easy to use features like if you want to change the color of an SVG and if you want to make it clickable or you want to load an SVG from a URI.

    [00:30 - 00:47] So from that perspective it's quite a good solution. Just one thing if you have an SVG with a lot of paths now React Native SVG might be able to handle it but I would still recommend that you use images or PNGs for that if possible.

    [00:48 - 01:01] That's because low-end devices especially on Android they might start slowing up. SVGs do take up a lot of memory if it's a complex one with a lot of paths.

    [01:02 - 01:16] So other than that I think this is the best solution out there in the community . If you want to check out some of the possible things that we can do with this just check out the official demo over here.

    [01:17 - 01:26] It has a lot of examples like handling of touch events, a pan responder and yeah a lot of things.