oblador / react-native-vector-image Goto Github PK
View Code? Open in Web Editor NEWiOS/Android native vector assets generated from SVG
License: MIT License
iOS/Android native vector assets generated from SVG
License: MIT License
I'm planning to use this library on my project. I noticed that its relatively new project and doesn't really have huge downloads. I also see that currently you are the only contributor. So I just wanted to know if this project is active or not.
I couldn't install this lib on npm nor yarn
, and the repo
lib won't be available anymore
Hi, this looks really promising. I just wanted to know if there is any benchmarking done when compared to react-native-svg?
I tried using react-native-svg in one of our projects, and it increased the bundle size.
Since this library uses native assets, is it safe to assume it would have zero impact on bundle size?
Hi!
We are two developers, one working on Mac and the other on Windows using this library for our RN project. Whenever one of us generates images using yarn react-native-vector-image generate
and then the other runs the command to regenerate the same files, it creates a diff with file renames for all image files. It seems like the hash code part of generated image file names is different depending on whether generated on Mac or Windows.
Regarding that I have two questions.
While we can still use the lib (thanks for it!), it creates a lot of unnecessary diff changes during commits.
Thanks!
When trying to run react-native-vector-image generate
, we are no longer able to generate and receive the message below. Relevant packages being used:
node:internal/modules/cjs/loader:998
throw err;
^
Error: Cannot find module 'metro/src/Server'
Require stack:
- /path/to/node_modules/react-native-vector-image/src/cli/getAssets.js
- /path/to/node_modules/react-native-vector-image/src/cli/generateAssets.js
- /path/to/node_modules/react-native-vector-image/src/cli/index.js
- /path/to/node_modules/react-native-vector-image/bin/react-native-vector-image.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Function.Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1067:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/path/to/node_modules/react-native-vector-image/src/cli/getAssets.js:1:16)
at Module._compile (node:internal/modules/cjs/loader:1165:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
at Module.load (node:internal/modules/cjs/loader:1043:32)
at Function.Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1067:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/path/to/node_modules/react-native-vector-image/src/cli/getAssets.js',
'/path/to/node_modules/react-native-vector-image/src/cli/generateAssets.js',
'/path/to/node_modules/react-native-vector-image/src/cli/index.js',
'/path/to/node_modules/react-native-vector-image/bin/react-native-vector-image.js'
]
}
I have tried reverting to version 0.3.2 and still get the same error. Is my current version (0.3.3) compatible with RN 64.2? Or is the version not the issue?
Can't install react-native-vector-image with npm 8.x due to error:
Invalid tag name "=>0.4.0" of package "@klarna/react-native-vector-drawable@=>0.4.0": Tags may not have any characters that encodeURIComponent encodes.
While trying to generate the vector assets in ios using the command ''yarn react-native-vector-image generate', I am getting the 'Invalid --ios-output argument, folder doesn't exist'. In android everything seems to be working fine. Am i missing any configurations?
I also tried with giving folder path through the command 'yarn react-native-vector-image generate --ios-output ios/Appname/Image.xcassets'. The command runs successfully but I do not see any assets generated to be recognized by ios app.
I have following environment:
"react-native": "0.64.2",
"@klarna/react-native-vector-drawable": "^0.3.0",
"react-native-vector-image": "^0.3.2",
yarn 1.22.10
I am also using react native boiler plate 'ignite'
<VectorImage source={require('./try.svg')} />
Also Added required line in android/app/build.gradle
but facing same issue , Please Help
Hello, I am using this package for my react-native project and want to implement a simple striped pattern but when I generate the files using npx react-native-vector-image generate
it complains about using <pattern>
inside my svg.
Full error message:
src/assets/images/svg/pattern.svg: line 3: <pattern> is not supported
I have looked into alternative RN svg packages and found that this one supports the element type, so I am wondering why this package does not. Any help getting this to work would be appreciated.
The svg code, for anyone curious:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 43 4000">
<defs>
<pattern id="pattern" width="5" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45 50 50)">
<line stroke="#a6a6a6" stroke-width="2px" y2="10" />
</pattern>
</defs>
<rect x="0" y="0" width="43" height="4000" fill="url(#pattern)" opacity="1" stroke-width="2px" />
</svg>
I have investigated the issue, and it seems like Android simply doesnt support svg gradients and patterns.
The error comes from the Svg2vg
jar library this package uses, which in turn uses com.android.ide.common.vectordrawable.Svg2Vector to convert an svg to android vector.
So unfortunately there is no realistic way to make this work anytime soon.
I installed the packages and did all the config for Android but I still get an error when npm run android
:
FAILURE: Build failed with an exception.
Could not resolve all files for configuration ':klarna_react-native-vector-drawable:debugCompileClasspath'.
Could not find androidx.appcompat:appcompat:1.2.0.
Required by:
project :klarna_react-native-vector-drawable
Could not find androidx.appcompat:appcompat:1.2.0.
Required by:
project :klarna_react-native-vector-drawable > com.facebook.react:react-native:0.66.1
"dependencies": {
"@klarna/react-native-vector-drawable": "^0.3.0",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-vector-icons": "^9.0.0",
"react-native-vector-image": "^0.3.2"
},
Hey, I was wondering is there a way to scale svg files on different screen sizes like ipads? Currently setting width or height it uses svg canvas size and does not scale accordingly to screen size width. Btw, Cool lib!
Hi,
I have installed the necessary packages.
yarn add react-native-vector-image @klarna/react-native-vector-drawable
I have added the following line to the React Native Build Phase
../node_modules/react-native-vector-image/strip_svgs.sh
When I run the yarn react-native-vector-image generate
command, I get the following error
While trying to resolve module `nanoid/non-secure` from file `/Users/someuser/Documents/workspace/shop-mobile/node_modules/@react-navigation/routers/lib/commonjs/BaseRouter.js`, the package `/Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs`. Indeed, none of these files exist:
* /Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* /Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
Error: While trying to resolve module `nanoid/non-secure` from file `/Users/someuser/Documents/workspace/shop-mobile/node_modules/@react-navigation/routers/lib/commonjs/BaseRouter.js`, the package `/Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs`. Indeed, none of these files exist:
* /Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* /Users/someuser/Documents/workspace/shop-mobile/node_modules/nanoid/non-secure/index.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at DependencyGraph.resolveDependency (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/node-haste/DependencyGraph.js:436:17)
at Object.resolve (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)
at _next (/Users/someuser/Documents/workspace/shop-mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:9)
Failed to generate vector assets
✨ Done in 9.03s.
What am I missing here? I'm using react-navigation package for screen navigation.
Not working with the web, when using react-native-web.
Hi Joel,
This is a great library, any chance we can get expo support through a config plugin?
When I try to npm install
I get a conflict error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @klarna/[email protected]
npm ERR! node_modules/@klarna/react-native-vector-drawable
npm ERR! @klarna/react-native-vector-drawable@"0.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @klarna/react-native-vector-drawable@"^0.1.0" from [email protected]
npm ERR! node_modules/react-native-vector-image
npm ERR! react-native-vector-image@"0.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @klarna/[email protected]
npm ERR! node_modules/@klarna/react-native-vector-drawable
npm ERR! peer @klarna/react-native-vector-drawable@"^0.1.0" from [email protected]
npm ERR! node_modules/react-native-vector-image
npm ERR! react-native-vector-image@"0.4.1" from the root project
My package.json dependencies:
"dependencies": {
"@klarna/react-native-vector-drawable": "0.4.0",
"@react-native-community/blur": "4.3.2",
"@react-navigation/bottom-tabs": "6.5.7",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.3.16",
"i18n-js": "4.2.3",
"react": "18.2.0",
"react-native": "0.72.0-rc.2",
"react-native-gesture-handler": "2.9.0",
"react-native-safe-area-context": "4.5.2",
"react-native-screens": "3.20.0",
"react-native-vector-image": "0.4.1"
},
"devDependencies": {
"@babel/core": "7.21.8",
"@babel/eslint-parser": "7.21.8",
"@babel/runtime": "7.21.5",
"@react-native/metro-config": "0.72.1",
"babel-jest": "29.5.0",
"eslint": "8.40.0",
"eslint-config-airbnb": "19.0.4",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"jest": "29.5.0",
"metro-react-native-babel-preset": "0.76.3",
"react-test-renderer": "18.2.0"
}
Error can be suppressed by adding --legacy-peer-deps
param.
Newly installed dependency, cannot build with debug variant
run npx react-native run-android
> Configure project :react-native-vector-icons
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
FAILURE: Build failed with an exception.
* Where:
Script '/Users/PhilLui/projects/TestApp/node_modules/react-native-vector-image/strip_svgs.gradle' line: 10
* What went wrong:
Cannot get property 'name' on null object
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Can build normally with debug variant
I think the issue is due to the following row in this repo gradle file
def bundleTasks = tasks.findAll { task -> task.name.startsWith("bundle") && task.name.endsWith("JsAndAssets") && !task.name.contains("Debug") && task.enabled }
As all debug tasks has been removed in this filter closure, this repo is not possible to build with debug variant.
What are the concerns of excluding debug tasks?
I don't know if this can help or not, my tasks list attached
task ':app:androidDependencies'
task ':app:assemble'
task ':app:assembleAndroidTest'
task ':app:assembleDebug'
task ':app:assembleDebugAndroidTest'
task ':app:assembleDebugUnitTest'
task ':app:assembleRelease'
task ':app:assembleReleaseUnitTest'
task ':app:build'
task ':app:buildDebugPreBundle'
task ':app:buildDependents'
task ':app:buildEnvironment'
task ':app:buildNeeded'
task ':app:buildReleasePreBundle'
task ':app:bundle'
task ':app:bundleDebug'
task ':app:bundleDebugAndroidTestClasses'
task ':app:bundleDebugAndroidTestResources'
task ':app:bundleDebugClasses'
task ':app:bundleDebugResources'
task ':app:bundleDebugUnitTestClasses'
task ':app:bundleRelease'
task ':app:bundleReleaseClasses'
task ':app:bundleReleaseResources'
task ':app:bundleReleaseUnitTestClasses'
task ':app:check'
task ':app:checkDebugAndroidTestDuplicateClasses'
task ':app:checkDebugDuplicateClasses'
task ':app:checkDebugManifest'
task ':app:checkReleaseDuplicateClasses'
task ':app:checkReleaseManifest'
task ':app:clean'
task ':app:cleanBuildCache'
task ':app:collectDebugDependencies'
task ':app:collectReleaseDependencies'
task ':app:compileDebugAidl'
task ':app:compileDebugAndroidTestAidl'
task ':app:compileDebugAndroidTestJavaWithJavac'
task ':app:compileDebugAndroidTestKotlin'
task ':app:compileDebugAndroidTestRenderscript'
task ':app:compileDebugAndroidTestShaders'
task ':app:compileDebugAndroidTestSources'
task ':app:compileDebugJavaWithJavac'
task ':app:compileDebugKotlin'
task ':app:compileDebugRenderscript'
task ':app:compileDebugShaders'
task ':app:compileDebugSources'
task ':app:compileDebugUnitTestJavaWithJavac'
task ':app:compileDebugUnitTestKotlin'
task ':app:compileDebugUnitTestSources'
task ':app:compileLint'
task ':app:compileReleaseAidl'
task ':app:compileReleaseJavaWithJavac'
task ':app:compileReleaseKotlin'
task ':app:compileReleaseRenderscript'
task ':app:compileReleaseShaders'
task ':app:compileReleaseSources'
task ':app:compileReleaseUnitTestJavaWithJavac'
task ':app:compileReleaseUnitTestKotlin'
task ':app:compileReleaseUnitTestSources'
task ':app:components'
task ':app:configureDebugDependencies'
task ':app:configureReleaseDependencies'
task ':app:connectedAndroidTest'
task ':app:connectedCheck'
task ':app:connectedDebugAndroidTest'
task ':app:consumeConfigAttr'
task ':app:copyDownloadableDepsToLibs'
task ':app:crashlyticsUploadDistributionDebug'
task ':app:crashlyticsUploadDistributionRelease'
task ':app:createDebugCompatibleScreenManifests'
task ':app:createMockableJar'
task ':app:createReleaseCompatibleScreenManifests'
task ':app:dependencies'
task ':app:dependencyInsight'
task ':app:dependentComponents'
task ':app:deviceAndroidTest'
task ':app:deviceCheck'
task ':app:extractApksForDebug'
task ':app:extractApksForRelease'
task ':app:extractProguardFiles'
task ':app:fabricGenerateResourcesDebug'
task ':app:fabricGenerateResourcesRelease'
task ':app:generateDebugAndroidTestAssets'
task ':app:generateDebugAndroidTestBuildConfig'
task ':app:generateDebugAndroidTestResValues'
task ':app:generateDebugAndroidTestResources'
task ':app:generateDebugAndroidTestSources'
task ':app:generateDebugAssets'
task ':app:generateDebugBuildConfig'
task ':app:generateDebugFeatureMetadata'
task ':app:generateDebugFeatureTransitiveDeps'
task ':app:generateDebugResValues'
task ':app:generateDebugResources'
task ':app:generateDebugSources'
task ':app:generateDebugUnitTestAssets'
task ':app:generateDebugUnitTestResources'
task ':app:generateDebugUnitTestSources'
task ':app:generatePackageList'
task ':app:generateReleaseAssets'
task ':app:generateReleaseBuildConfig'
task ':app:generateReleaseFeatureMetadata'
task ':app:generateReleaseFeatureTransitiveDeps'
task ':app:generateReleaseResValues'
task ':app:generateReleaseResources'
task ':app:generateReleaseSources'
task ':app:generateReleaseUnitTestAssets'
task ':app:generateReleaseUnitTestResources'
task ':app:generateReleaseUnitTestSources'
task ':app:help'
task ':app:installDebug'
task ':app:installDebugAndroidTest'
task ':app:installRelease'
task ':app:javaPreCompileDebug'
task ':app:javaPreCompileDebugAndroidTest'
task ':app:javaPreCompileDebugUnitTest'
task ':app:javaPreCompileRelease'
task ':app:javaPreCompileReleaseUnitTest'
task ':app:kaptDebugAndroidTestKotlin'
task ':app:kaptDebugKotlin'
task ':app:kaptDebugUnitTestKotlin'
task ':app:kaptGenerateStubsDebugAndroidTestKotlin'
task ':app:kaptGenerateStubsDebugKotlin'
task ':app:kaptGenerateStubsDebugUnitTestKotlin'
task ':app:kaptGenerateStubsReleaseKotlin'
task ':app:kaptGenerateStubsReleaseUnitTestKotlin'
task ':app:kaptReleaseKotlin'
task ':app:kaptReleaseUnitTestKotlin'
task ':app:lint'
task ':app:lintDebug'
task ':app:lintFix'
task ':app:lintRelease'
task ':app:lintVitalRelease'
task ':app:mainApkListPersistenceDebug'
task ':app:mainApkListPersistenceDebugAndroidTest'
task ':app:mainApkListPersistenceRelease'
task ':app:makeApkFromBundleForDebug'
task ':app:makeApkFromBundleForRelease'
task ':app:mergeDebugAndroidTestAssets'
task ':app:mergeDebugAndroidTestJniLibFolders'
task ':app:mergeDebugAndroidTestResources'
task ':app:mergeDebugAndroidTestShaders'
task ':app:mergeDebugAssets'
task ':app:mergeDebugJniLibFolders'
task ':app:mergeDebugResources'
task ':app:mergeDebugShaders'
task ':app:mergeReleaseAssets'
task ':app:mergeReleaseJniLibFolders'
task ':app:mergeReleaseResources'
task ':app:mergeReleaseShaders'
task ':app:model'
task ':app:packageDebug'
task ':app:packageDebugAndroidTest'
task ':app:packageDebugBundle'
task ':app:packageDebugUniversalApk'
task ':app:packageRelease'
task ':app:packageReleaseBundle'
task ':app:packageReleaseUniversalApk'
task ':app:preBuild'
task ':app:preDebugAndroidTestBuild'
task ':app:preDebugBuild'
task ':app:preDebugUnitTestBuild'
task ':app:preReleaseBuild'
task ':app:preReleaseUnitTestBuild'
task ':app:prepareKotlinBuildScriptModel'
task ':app:prepareLintJar'
task ':app:prepareLintJarForPublish'
task ':app:processDebugAndroidTestJavaRes'
task ':app:processDebugAndroidTestManifest'
task ':app:processDebugAndroidTestResources'
task ':app:processDebugGoogleServices'
task ':app:processDebugJavaRes'
task ':app:processDebugManifest'
task ':app:processDebugResources'
task ':app:processDebugUnitTestJavaRes'
task ':app:processReleaseGoogleServices'
task ':app:processReleaseJavaRes'
task ':app:processReleaseManifest'
task ':app:processReleaseResources'
task ':app:processReleaseUnitTestJavaRes'
task ':app:projects'
task ':app:properties'
task ':app:reportBuildArtifactsDebug'
task ':app:reportBuildArtifactsRelease'
task ':app:reportSourceSetTransformAndroidTest'
task ':app:reportSourceSetTransformAndroidTestDebug'
task ':app:reportSourceSetTransformDebug'
task ':app:reportSourceSetTransformMain'
task ':app:reportSourceSetTransformRelease'
task ':app:reportSourceSetTransformTest'
task ':app:reportSourceSetTransformTestDebug'
task ':app:reportSourceSetTransformTestRelease'
task ':app:resolveConfigAttr'
task ':app:signDebugBundle'
task ':app:signReleaseBundle'
task ':app:signingConfigWriterDebug'
task ':app:signingConfigWriterDebugAndroidTest'
task ':app:signingConfigWriterRelease'
task ':app:signingReport'
task ':app:sourceSets'
task ':app:tasks'
task ':app:test'
task ':app:testDebugUnitTest'
task ':app:testReleaseUnitTest'
task ':app:transformClassesWithDexBuilderForDebug'
task ':app:transformClassesWithDexBuilderForDebugAndroidTest'
task ':app:transformClassesWithDexBuilderForRelease'
task ':app:transformDexArchiveWithDexMergerForDebug'
task ':app:transformDexArchiveWithDexMergerForDebugAndroidTest'
task ':app:transformDexArchiveWithDexMergerForRelease'
task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'
task ':app:transformDexArchiveWithExternalLibsDexMergerForDebugAndroidTest'
task ':app:transformDexArchiveWithExternalLibsDexMergerForRelease'
task ':app:transformNativeLibsWithMergeJniLibsForDebug'
task ':app:transformNativeLibsWithMergeJniLibsForDebugAndroidTest'
task ':app:transformNativeLibsWithMergeJniLibsForRelease'
task ':app:transformResourcesWithMergeJavaResForDebug'
task ':app:transformResourcesWithMergeJavaResForDebugAndroidTest'
task ':app:transformResourcesWithMergeJavaResForDebugUnitTest'
task ':app:transformResourcesWithMergeJavaResForRelease'
task ':app:transformResourcesWithMergeJavaResForReleaseUnitTest'
task ':app:uninstallAll'
task ':app:uninstallDebug'
task ':app:uninstallDebugAndroidTest'
task ':app:uninstallRelease'
task ':app:validateSigningDebug'
task ':app:validateSigningDebugAndroidTest'
task ':app:validateSigningRelease'
task ':app:writeDebugApplicationId'
task ':app:writeDebugModuleMetadata'
task ':app:writeReleaseApplicationId'
task ':app:writeReleaseModuleMetadata'
I got an error when installing lib with the react native typescript
template
1
alpha gets transformed into 01
should be ff
.
Hi there,
Thanks again for this package. We updated to react native 0.73 and thus needed to upgrade our metro config file.
Metro Config Old version:
/**
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
Metro Config required new version (Added the old config file line of code):
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
module.exports = mergeConfig(defaultConfig, config);
When using the new config file, the Generate command doesn't do anything. When using the old config file, the Generate command works but the build fails as it can't handle PNG files. Also, even if I created with the old file the SVG files but run the project with the new metro file, I get this error concerning SVG - "No asset registered for source "function SvgComponent(a0){[bytecode]}", you may have to generate assest and recompile.
Here is some code I would love to work:
import React from 'react';
import VectorImage from 'react-native-vector-image';
import appleIcon from './apple.svg';
import googleIcon from './google.svg';
import facebookIcon from './facebook.svg';
import dollar from './dollar-square.svg';
import dualArrow from './dual-arrow.svg';
import pencil from './pencil.svg';
import home from './home.svg';
import homeFill from './home-fill.svg';
import wallet from './wallet.svg';
import walletFill from './wallet-fill.svg';
import profile from './profile.svg';
import profileFill from './profile-fill.svg';
import clock from './clock.svg';
import swap from './swap.svg';
import selectedCheck from './selectedCheck.svg';
import deselectedCheck from './deselectedCheck.svg';
import usdcoin from './usdcoin.svg';
import transmitsquare from './transmitsquare.svg';
import brifecasetick from './brifecasetick.svg';
import downarrow from './downarrow.svg';
import addAccountIcon from './add-account.svg';
import copy from './copy.svg';
import share from './share.svg';
import upload from './upload.svg';
import calendar from './calendar.svg';
import moneySend from './money-send.svg';
import moneyExchange from './money-exchange.svg';
import threeDots from './threeDots.svg';
import exchangeSummary from './exchangeSummary.svg';
import withdrawProgress from './withdrawProgress.svg';
import editProfile from './editProfile.svg';
import notification from './notification.svg';
import language from './language.svg';
import fingerPrint from './fingerPrint.svg';
import darkTheme from './darkTheme.svg';
import privacyPolicy from './privacyPolicy.svg';
import helpSupport from './helpSupport.svg';
import contactUs from './contactUs.svg';
import logout from './logout.svg';
import rightArrow from './rightArrow.svg';
import sound from './sound.svg';
import vibrate from './vibrate.svg';
import appUpdates from './appUpdates.svg';
import billRemainder from './billRemainder.svg';
import promotion from './promotion.svg';
import discountAvailable from './discountAvailable.svg';
import paymentRequest from './paymentRequest.svg';
import newServiceAvailable from './newServiceAvailable.svg';
import newTipsAvailable from './newTipsAvailable.svg';
import rememberMe from './rememberMe.svg';
import faceId from './faceId.svg';
import biometricId from './biometricId.svg';
import googleAuthenticator from './googleAuthenticator.svg';
import changePassword from './changePassword.svg';
import changePin from './changePin.svg';
import ownership from './ownership.svg';
import arrow from './arrow.svg';
import close from './close.svg';
import plus from './plus.svg';
//FIX: Change back to VectorImage
type TVectorImage = React.ComponentProps;
export type TIcon = Omit<TVectorImage, 'source'>;
export const AppleIcon = (props: TIcon) => (
<VectorImage {...props} source={appleIcon} />
);
export const GoogleIcon = (props: TIcon) => (
<VectorImage {...props} source={googleIcon} />
);
export const FacebookIcon = (props: TIcon) => (
<VectorImage {...props} source={facebookIcon} />
);
export const Dollar = (props: TIcon) => (
<VectorImage {...props} source={dollar} />
);
export const DualArrow = (props: TIcon) => (
<VectorImage {...props} source={dualArrow} />
);
export const Pencil = (props: TIcon) => (
<VectorImage {...props} source={pencil} />
);
export const HomeIcon = (props: TIcon) => (
<VectorImage {...props} source={home} />
);
export const HomeFillIcon = (props: TIcon) => (
<VectorImage {...props} source={homeFill} />
);
export const WalletIcon = (props: TIcon) => (
<VectorImage {...props} source={wallet} />
);
export const WalletFillIcon = (props: TIcon) => (
<VectorImage {...props} source={walletFill} />
);
export const ProfileIcon = (props: TIcon) => (
<VectorImage {...props} source={profile} />
);
export const ProfileFillIcon = (props: TIcon) => (
<VectorImage {...props} source={profileFill} />
);
export const ClockIcon = (props: TIcon) => (
<VectorImage {...props} source={clock} />
);
export const SwapIcon = (props: TIcon) => (
<VectorImage {...props} source={swap} />
);
export const SelectedCheck = (props: TIcon) => (
<VectorImage {...props} source={selectedCheck} />
);
export const DeselectedCheck = (props: TIcon) => (
<VectorImage {...props} source={deselectedCheck} />
);
export const USDCoin = (props: TIcon) => (
<VectorImage {...props} source={usdcoin} />
);
export const TransmitSquare = (props: TIcon) => (
<VectorImage {...props} source={transmitsquare} />
);
export const Brifecasetick = (props: TIcon) => (
<VectorImage {...props} source={brifecasetick} />
);
export const DownArrow = (props: TIcon) => (
<VectorImage {...props} source={downarrow} />
);
export const AddAccountIcon = (props: TIcon) => (
<VectorImage {...props} source={addAccountIcon} />
);
export const CopyIcon = (props: TIcon) => (
<VectorImage {...props} source={copy} />
);
export const ShareIcon = (props: TIcon) => (
<VectorImage {...props} source={share} />
);
export const UploadIcon = (props: TIcon) => (
<VectorImage {...props} source={upload} />
);
export const CalendarIcon = (props: TIcon) => (
<VectorImage {...props} source={calendar} />
);
export const MoneySend = (props: TIcon) => (
<VectorImage {...props} source={moneySend} />
);
export const MoneyExchange = (props: TIcon) => (
<VectorImage {...props} source={moneyExchange} />
);
export const ThreeDots = (props: TIcon) => (
<VectorImage {...props} source={threeDots} />
);
export const ExchangeSummaryIcon = (props: TIcon) => (
<VectorImage {...props} source={exchangeSummary} />
);
export const WithdrawProgressIcon = (props: TIcon) => (
<VectorImage {...props} source={withdrawProgress} />
);
export const EditProfileIcon = (props: TIcon) => (
<VectorImage {...props} source={editProfile} />
);
export const NotificationIcon = (props: TIcon) => (
<VectorImage {...props} source={notification} />
);
export const LanguageIcon = (props: TIcon) => (
<VectorImage {...props} source={language} />
);
export const FingerPrintIcon = (props: TIcon) => (
<VectorImage {...props} source={fingerPrint} />
);
export const DarkThemeIcon = (props: TIcon) => (
<VectorImage {...props} source={darkTheme} />
);
export const PrivacyPolicyIcon = (props: TIcon) => (
<VectorImage {...props} source={privacyPolicy} />
);
export const HelpSupportIcon = (props: TIcon) => (
<VectorImage {...props} source={helpSupport} />
);
export const ContactUsIcon = (props: TIcon) => (
<VectorImage {...props} source={contactUs} />
);
export const LogoutIcon = (props: TIcon) => (
<VectorImage {...props} source={logout} />
);
export const RightArrowIcon = (props: TIcon) => (
<VectorImage {...props} source={rightArrow} />
);
export const SoundIcon = (props: TIcon) => (
<VectorImage {...props} source={sound} />
);
export const VibrateIcon = (props: TIcon) => (
<VectorImage {...props} source={vibrate} />
);
export const AppUpdatesIcon = (props: TIcon) => (
<VectorImage {...props} source={appUpdates} />
);
export const BillRemainderIcon = (props: TIcon) => (
<VectorImage {...props} source={billRemainder} />
);
export const PromotionIcon = (props: TIcon) => (
<VectorImage {...props} source={promotion} />
);
export const DiscountAvailableIcon = (props: TIcon) => (
<VectorImage {...props} source={discountAvailable} />
);
export const PaymentRequestIcon = (props: TIcon) => (
<VectorImage {...props} source={paymentRequest} />
);
export const NewServiceAvailableIcon = (props: TIcon) => (
<VectorImage {...props} source={newServiceAvailable} />
);
export const NewTipsAvailableIcon = (props: TIcon) => (
<VectorImage {...props} source={newTipsAvailable} />
);
export const RememberMeIcon = (props: TIcon) => (
<VectorImage {...props} source={rememberMe} />
);
export const FaceIdIcon = (props: TIcon) => (
<VectorImage {...props} source={faceId} />
);
export const BiometricIdIcon = (props: TIcon) => (
<VectorImage {...props} source={biometricId} />
);
export const GoogleAuthenticatorIcon = (props: TIcon) => (
<VectorImage {...props} source={googleAuthenticator} />
);
export const ChangePassswordIcon = (props: TIcon) => (
<VectorImage {...props} source={changePassword} />
);
export const ChangePinIcon = (props: TIcon) => (
<VectorImage {...props} source={changePin} />
);
export const OwnershipIcon = (props: TIcon) => (
<VectorImage {...props} source={ownership} />
);
export const ArrowIcon = (props: TIcon) => (
<VectorImage {...props} source={arrow} />
);
export const CloseIcon = (props: TIcon) => (
<VectorImage {...props} source={close} />
);
export const PlusIcon = (props: TIcon) => (
<VectorImage {...props} source={plus} />
);
In the latest version of RN 0.71 the build.gradle
has been changed a lot because of adopting New Architecture and introducing new React Native Gradle Plugin. And now this package doesn't allow to build the Android app with the following error:
FAILURE: Build failed with an exception.
* Where:
Script '/private/tmp/AwesomeProject/node_modules/react-native-vector-image/strip_svgs.gradle' line: 10
* What went wrong:
Cannot get property 'name' on null object
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 20s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* Where:
Script '/private/tmp/AwesomeProject/node_modules/react-native-vector-image/strip_svgs.gradle' line: 10
* What went wrong:
Cannot get property 'name' on null object
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 20s
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.