RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/oblador/react-native-vector-image below:

oblador/react-native-vector-image: iOS/Android native vector assets generated from SVG

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.

yarn add react-native-vector-image @klarna/react-native-vector-drawable

For expo, see @zamplyy/react-native-vector-image-plugin.

Edit android/app/build.gradle to look like this (without the +):

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "../../node_modules/react-native-vector-image/strip_svgs.gradle"

Open your project in Xcode, select the Build Phases tab, and edit the Bundle React Native code and images script to look like this (without the +):

set -e

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
+ ../node_modules/react-native-vector-image/strip_svgs.sh

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 --current-color Replace any currentColor color references in SVGs. #000000 --current-color-dark Replace any currentColor color references in .dark.svg SVGs. #ffffff

yarn react-native run-ios
# or
yarn react-native run-android

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.

the generate command does not generate any new assets

Make sure your image component is used (imported) somewhere in your code, otherwise the asset generator won't find it.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4