Vinícius Pacheco Vieira
Posted on
#typescript #tutorial #reactnative
I've faced some struggle using svg files with React-Native so I decided to give my 2 cents on how to configure it without headaches.
The idea for it is that with typescript I've had some trouble doing the whole setup so I thought it could be a good idea to document my exact steps.
For this tutorial I'll use react-native-svg for svg files and use 0.60+ version of React-Native.
Steps
- Setup from Scratch
- Svg setup
Setup from Scratch
Let's start with a blank new project and setup all the way until importing and using svg modules into an app.
react-native init myappwithsvgNow to add typescript to the project:
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer# or for npmnpm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-rendererNext we need to create a tsconfig.json file and add:
{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ]}Create a separate jest.config.js file:
module.exports = { preset: 'react-native', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],};And finally change the App.js to App.tsx. From this step forward we are done setting up typescript and we can go to the second step that is to setup the svg modules that allow us to use svg files.
Svg setup
We will install two libraries, react-native-svg and react-native-svg-transformer and configure one after another.
Let's start installing the react-native-svg:
yarn add react-native-svgInstall the pod related to it:
cd ios && pod installNow we need to install the react-native-svg-transformer to make react-native able to import those files:
yarn add -D react-native-svg-transformerReplace the metro.config.js code with:
const { getDefaultConfig } = require('metro-config');module.exports = (async () => { const { resolver: { sourceExts, assetExts }, } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { assetExts: assetExts.filter(ext => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'], }, };})();If you try to import files from here you will be able but typescript will give you ts error saying that your svg file could not be found.
Create a declarations.d.ts file in the root of your project if you don't have yet. Paste the following code:
declare module "*.svg" { import { SvgProps } from "react-native-svg"; const content: React.FC<SvgProps>; export default content;}Now we can import svg files just like normal javascript modules. Create a separate folder named assets in your project root and save the dragon svg. Rename the file to dragon.svg to make it easier to import.
Now you can import your files and use all feature [react-native-svg] provides to svg files. Here is my example from the dragon file:
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */import React, {ReactNode} from 'react';import {SafeAreaView, StyleSheet, View, StatusBar} from 'react-native';import DragonSvg from './assets/dragon.svg';const App: () => ReactNode = () => { return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <View style={styles.body}> <DragonSvg height={400} width={400} fill="blue" /> </View> </SafeAreaView> </> );};const styles = StyleSheet.create({ body: { height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', },});export default App;Running our app on a simulator should result:
The full code of this tutorial is in my github repository here. Now your app is capable of importing svg files correctly with Typescript!
Top comments (6)
Subscribe
Mohammed Yasin Mulla
Mohammed Yasin Mulla
-
Joined
• Apr 2 '23 • Edited on Apr 2 • Edited
- Copy link
Thank you,
It is working fine in my react-native project
danielcnascimento
danielcnascimento
👋 I'm a junior dev passionated by learning how to improve every day! I want a JS-based curriculum, so I code it hard 🚀
-
Location
Brazil, RJ
-
Work
Software Developer
-
Joined
• Mar 18 '21
- Copy link
Bruh I tried to add a file: index.d.ts
But didn't work for React Native, why it's working on React then?
These types of definitions file don't work on React Native?
tallestlegacy
tallestlegacy
-
Joined
• Jun 17 '22
- Copy link
Bro, the picture is a JS project not a TS
feels like a scam
Valentine Asogwa
Valentine Asogwa
-
Joined
• Jan 16 '23
- Copy link
Work fine for me ...thanks
Marvelous
Marvelous
Pythonista| Web development| Data Science.
-
Location
Nigeria
-
Work
Web developer
-
Joined
• Jun 10 '22
- Copy link
This worked great for me. Thanks.
mohammad hassani
mohammad hassani
i'm new in web developing but I believe in the land of desires
-
Education
computer eng of vru.ac.ir
-
Joined
• Jan 9 '22
- Copy link
it worked for me! thanks!
For further actions, you may consider blocking this person and/or reporting abuse
