Using SVGs in React Native Development with Expo: Step-by-step Guidance!
Why is the image format SVG so popular amongst app developers these days? Well, SVGs come with a wide range of capabilities and have a lot to offer to modern-day mobile & web development projects. Developers can create & edit SVG files effortlessly using any text editor and manipulate the properties using CSS. Besides, you can scale an SVG to any resolution based on your requirements. The resolutions do not affect the size of files owing to the nature of SVGs. As a result, the size of the files is quite small as compared to pixel- based ones. Moreover, an SVG is SEO friendly as its language format is based on XML markup. This enables one to embed descriptions or keywords directly into the image. Furthermore, developers can easily customize, edit, and animate SVG files as per the need.
This post guides you through the right methodology for using SVGs for React Native with Expo. Here, we have selected React Native as it is one of the most widely used technologies for developing mobile & web apps. This write-up will provide you with thorough insights on how to employ SVGs in React Native app development projects.
What are SVGs?
Scalable Vector Graphics, commonly known as SVGs is an image format that allows you to resize and stretch images as per the need without affecting the quality or performance of images. SVGs prove to be an effective way of presenting visual elements like icons.
Employing SVGs on the web is a simple process; developers simply need to copy an SVG and then embed it inline into an HTML file. This method is effective as browsers know how an SVG can be parsed and presented. However, employing SVGs becomes difficult when it comes to mobile apps. This is because Expo doesn’t understand how SVGs can be processed & parsed right away on iOS and Android development environments. Here, you need to use a React Native package and SVG converter to make things work.
Check out how to carry out the whole process starting from SVG creation to implementing it in an Expo project!
Employing SVGs in React Native with Expo: Key Steps to Follow
Step # 1: Create a React Native Project
For setting up a React Native project, we are going to employ the Expo framework for bootstrapping the React Native app. For this, you must install ‘Node.js/npm.’ For installing expo-cli globally, you need to open a terminal and then, run the code npm install –global expo-cli. Once installed, use the code “expo install react-native-svg-tutorial” for creating a new react-native project. While running this command, you’ll also get an option to choose a template. After this process is completed, you need to navigate to the root of your project directory. Now, start the Expo development server using the code expo start react-native-svg-tutorial and an interactive menu appears.
You can use the Expo dev server for testing your app locally during the development process. And, for running the application, you need either the ‘Expo Go App’ or an emulator.
Step # 2: Create an SVG in React Native
For creating an SVG in React Native, you will have to build a custom loader for the app. Here, you need the library called react-native-svg that supports React Native apps.To begin with, you need to open a terminal, navigate to the root of the project, and then, install the library using the code expo install react-native-svg. Now, go to the root directory and create a file named Loader.js. At this point, React Native developers need to do some coding and paste the code below this file.
Your SVG image is done! Please note that the aforesaid SVG image creation methodology involves using the components offered by react-native-svg in place of employing HTML elements. While HTML elements use the lower case for ‘naming,’ the components of react-native-svg use the sentence case.
Now, you need render the SVG in the App.js file.
Step # 3: Add an SVG to a React Native App
First of all, you need to create a new Expo app using the command expo init new-expo-app. Then, use the command, cd new-expo-app for moving it into the new folder of the expo app and add the react-native-svg using yarn add react-native-svg. This package provides SVG support to the React Native application.
Now, import the SVG file to the assets folder. Then, create a folder in the root of your project and give it a name. Add a .js file to this folder. Thereafter, import the necessary components for creating a function. For this, you need to create a svgComponent.js file and paste it into svgComponent.js. Now, open the SVG file. Copy the file’s contents and use it for replacing .
Now, it’s time to create a constant in the .js file & paste the SVG contents within a pair of batsticks. Then, generate a function within the .js file and employ the component SvgXml from react-native-svg. At this point, you’ll move the previous constant into xml prop and also can define their width and height. Then, return the function and your .js file is completed.
You can now import the new SVG component into your App.js and use it as required just like a regular React Expo component. Now, run the project and start the simulator by using the command expo start.
When can you consider adding an External SVG to a React Native App?
Now, the probable questions that will arise in your mind are: Is it at all necessary to create an SVG in React Native with Expo? Can’t an external SVG be used in React Native apps?
Well, this decision entirely depends on your project requirement. The key benefit of making an SVG in React Native with Expo is that this SVG component can be customized as per your need. You can also add animations and props to the SVG. However, all app development projects do not require image customization or animation. In such scenarios, you can simply add an external SVG image into your React Native app without customizing it.
There are two methods that are used for adding external SVG images to RN apps.
There are two methods that are used for adding external SVG images to RN apps.
The first one is the SvgUri component offered by the react-native-svg library. With react-native-svg-uri, you will be able to render external SVG images from a static file or a URL. However, this library involves a limitation when used in Android devices – file loading in the release mode becomes a problem. The SVGs are visible during the app development, testing, and debugging mode. But, as soon as the Android app is uploaded to the play store, the SVGs stop being rendered on Android devices. To resolve this issue, you need to use the svgXmlData prop along with the SvgUri component.
You can also employ another library named react-native-svg-transformer for importing external SVG files into React Native development projects.
Step # 4: Animate an SVG created in React Native
Here’s how to animate an SVG created in React Native with Expo. To achieve this outcome you need to modify the SVG component’s stroke color every few milliseconds. Create a file named AnimatedLoader.js and do some coding. Here, we are using React Native’s animated API for creating animations.
With the help of the code const AnimatedPath=Animated.createAnimatedComponent(Path), make the component ‘Path’ animable. Then, create an Animated.Value that you can attach with an animated component. Now, store the Animated.Value using a useRef hook so that you don’t have to mutate it directly. The benefit of creating the animation in the useEffect hook is that this loop enables developers to produce the fade-in & fade-out effects.
Now, hook up the animation you created with the component AnimatedPath. Attach the color Animated.Value with the AnimatedPath prop called ‘stroke.’ This will interpolate the color Animated.Value to create a color mapping between the outputRange and the inputRange. Thereafter, you need to save & reload the emulator for viewing the modifications.
Ending Note:
I hope this post has helped you to gain a thorough understanding of how to employ SVGs in React Native with Expo. However, for successfully creating & using SVGs in React native apps, you must rope in experience developers who can code efficiently without any glitches. So, if you are a novice or lack the necessary technical resources, you may seek assistance from adept React Native app development services for the best results.
