0.0.5 • Published 2 years ago
react-native-image-to-svg v0.0.5
react-native-image-to-svg
Installation
npm install --save @potrace
npm install --save @react-native-svg
npm install --save react-native-image-to-svg
Features
- It converts image to svg and returns svg path
- svg image animation
Declarative Usage
import {Image} from 'react-native';
import {launchImageLibrary} from 'react-native-image-picker';
import {AnimatedSvgComponent, ConvertImageToSvg} from 'react-native-image-to-svg';
import logo from '@imgs/logo.png';
const convertImageToSvg = ConvertImageToSvg(); => it is a custom hook.call it inside the functional component
const func_convertLocalImgToSVG = async () => {
try {
const imageUri = Image.resolveAssetSource(logo).uri;
const resp = await convertImageToSvg.func_convertImgToSVG(imageUri);
func_setImageResp(resp);
} catch (err) {
console.error(err);
}
};
OR
const func_openImagePicker = async () => {
launchImageLibrary(
{mediaType: 'photo', includeBase64: true},
async (response) => {
if (response.didCancel) {
} else if (response.errorCode) {
} else {
const [img] = response?.assets;
let resp = await convertImageToSvg.func_convertImgToSVG(img.uri);
func_setImageResp(resp);
}
});
};
const func_setImageResp = svgResp => {
setViewBox(svgResp?.viewBox);
setPath(svgResp?.path);
};
<AnimatedSvgComponent
path={path}
viewBox={viewBox}
fillColor={'#000'}
strokeWidth={5}
stokeColor="#98D1DA"
duration={4000}
backgroundColor="#fff"
animation={true}
/>
Properties
Parameter | Type | Description |
---|---|---|
uri | string | image uri need to pass for the conversion |
path | string | svg path |
viewBox | string | svg viewBox |
stokeColor | string | svg border color |
fillColor | string | svg fill |
strokeWidth | integer | svg width |
duration | integer | animation duration |
loop | boolean | animation loop |
backgroundColor | string | background color |
animation | boolean | animation |