From 9cc26da2cee9387f1cfaa365c32d3f547f2367c9 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Wed, 28 Aug 2024 10:09:16 +0200 Subject: [PATCH 01/46] feat: add type for toDataUrl options --- src/elements/Svg.tsx | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx index 36edd2cec..7ceafddbf 100644 --- a/src/elements/Svg.tsx +++ b/src/elements/Svg.tsx @@ -45,6 +45,21 @@ export interface SvgProps extends GProps, ViewProps, HitSlop { title?: string; } +export type ToDataUrlOptions = JpegOptions | PngOptions; + +interface JpegOptions { + format: 'jpeg'; + quality?: number; // Quality is optional but only available when format is 'jpeg' + width?: number; + height?: number; +} + +interface PngOptions { + format: 'png'; + width?: number; + height?: number; +} + export default class Svg extends Shape { static displayName = 'Svg'; @@ -81,10 +96,29 @@ export default class Svg extends Shape { root && root.setNativeProps(props); }; - toDataURL = (callback: (base64: string) => void, options?: object) => { + someFunction(options?: ToDataUrlOptions) { + if (options) { + if (!options.width && !options.height) { + throw new Error( + 'toDataURL: Please provide width and height in options.' + ); + } + if (options.width && !options.height) { + options.height = options.width; + } else if (!options.width && options.height) { + options.width = options.height; + } + } + } + + toDataURL = ( + callback: (base64: string) => void, + options?: ToDataUrlOptions + ) => { if (!callback) { return; } + this.someFunction(options); const handle = findNodeHandle(this.root as Component); const RNSVGSvgViewModule: Spec = // eslint-disable-next-line @typescript-eslint/no-var-requires From b3c411ad4d85c2e9df6f25b96b2aec433fbe2fb4 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Wed, 28 Aug 2024 10:10:18 +0200 Subject: [PATCH 02/46] feat: export ToDataUrlOptions type --- src/ReactNativeSVG.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts index 4aca02df4..3d4aeab2e 100644 --- a/src/ReactNativeSVG.ts +++ b/src/ReactNativeSVG.ts @@ -107,7 +107,7 @@ export type { PolylineProps } from './elements/Polyline'; export type { RadialGradientProps } from './elements/RadialGradient'; export type { RectProps } from './elements/Rect'; export type { StopProps } from './elements/Stop'; -export type { SvgProps } from './elements/Svg'; +export type { SvgProps, ToDataUrlOptions } from './elements/Svg'; export type { SymbolProps } from './elements/Symbol'; export type { TextProps } from './elements/Text'; export type { TextPathProps } from './elements/TextPath'; From 20b35ce14cd3df367f2960652b15c75e3e331633 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Wed, 28 Aug 2024 10:11:20 +0200 Subject: [PATCH 03/46] feat: update Test2233, add data for test two options image format --- apps/test-examples/src/Test2233.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/apps/test-examples/src/Test2233.tsx b/apps/test-examples/src/Test2233.tsx index 4ba5dd14f..51264a6f8 100644 --- a/apps/test-examples/src/Test2233.tsx +++ b/apps/test-examples/src/Test2233.tsx @@ -1,16 +1,30 @@ import * as React from 'react'; import {Button, SafeAreaView, View} from 'react-native'; -import Svg, {Path} from 'react-native-svg'; +import Svg, {Path, type ToDataUrlOptions} from 'react-native-svg'; const SvgLogoWelcome = () => { const ref = React.useRef(null); + + const optionsWithJPEGFormat: ToDataUrlOptions = { + format: 'jpeg', + width: 100, + height: 100, + quality: 1, + }; + + const optionsWithPNGFormat: ToDataUrlOptions = { + format: 'png', + width: 100, + height: 100, + }; + return (