React Native Vector Image
iOS/Android native vector assets generated from SVG.
- Faster render – ~5x faster than
react-native-svg. - Smaller JS bundle = faster startup.
- Native support for dark mode.
Installation
yarn add react-native-vector-image @klarna/react-native-drawable-android
Usage
Since native vector assets cannot be served over http via metro dev server, they must be generated and compiled into the app bundle.
Step 1: import an .svg file
import VectorImage from 'react-native-vector-image';
const App = () => <VectorImage source={require('./image.svg')} />;
To add dark mode to your image, create a new file with an .dark.svg extension, ie image.svg = light and image.dark.svg = dark.
Step 2: generate native assets
This takes a while as metro has to go through all the code to find the imported SVGs.
yarn react-native-vector-image generate
| Argument | Description | Default |
|---|---|---|
--entry-file |
Path to the app entrypoint file. | index.js |
--config |
Path to the metro config file. | metro.config.js |
--reset-cache |
Reset metro cache before extracting SVG assets. | false |
--ios-output |
Path to an iOS .xcassets folder. |
ios/AppName/Images.xcassets |
--no-ios-output |
Disable iOS output. | false |
--android-output |
Path to an Android res folder. |
android/app/src/main/res |
--no-android-output |
Disable Android output. | false |
Step 3: recompile
yarn react-native run-ios
# or
yarn react-native run-android
Troubleshooting
generate command outputs "Error while parsing image.svg"
Some optimizations applied by SVGO are not compatible with the SVG parser on Android. Try to re-export the SVG without optimizing it.
<VectorImage /> warns "Could not find image"
It means that the native vector asset does not exist or is out of sync with the SVG. Simply generate the files and recompile the app.
