Alert.alert('Pressed on G')} scale="1.4">
alert('Pressed on Text')}>
+ onPress={() => Alert.alert('Pressed on Text')}>
H
diff --git a/TestsExample/App.js b/TestsExample/App.js
index e578a7e6..d7dd721f 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -2,6 +2,7 @@
import React from 'react';
import ColorTest from './src/ColorTest';
+import Test1374 from './src/Test1374';
import Test1718 from './src/Test1718';
import Test1813 from './src/Test1813';
import Test1845 from './src/Test1845';
diff --git a/TestsExample/src/Test1374.tsx b/TestsExample/src/Test1374.tsx
new file mode 100644
index 00000000..07747597
--- /dev/null
+++ b/TestsExample/src/Test1374.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Svg, {Circle, SvgXml} from 'react-native-svg';
+
+export default function App() {
+ const svgXmlWithTransform = ``;
+ const svgXmlWithEmptyStyle = ``;
+
+const svgg = `
+
+`;
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/elements/Shape.tsx b/src/elements/Shape.tsx
index ec19dbe2..ef293b2c 100644
--- a/src/elements/Shape.tsx
+++ b/src/elements/Shape.tsx
@@ -1,6 +1,7 @@
import { Component } from 'react';
import SvgTouchableMixin from '../lib/SvgTouchableMixin';
-import { findNodeHandle, NativeMethods } from 'react-native';
+import extractBrush from '../lib/extract/extractBrush';
+import { ColorValue, findNodeHandle, NativeMethods } from 'react-native';
import {
ColumnMajorTransformMatrix,
TransformProps,
@@ -249,8 +250,13 @@ export default class Shape extends Component
{
setNativeProps = (
props: Object & {
matrix?: ColumnMajorTransformMatrix;
+ fill?: ColorValue;
} & TransformProps,
) => {
+ if (props.fill) {
+ // @ts-ignore TODO: native `fill` prop differs from the one passed in props
+ props.fill = extractBrush(props.fill);
+ }
this.root?.setNativeProps(props);
};
/*
diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx
index d94bc4ec..478abda7 100644
--- a/src/elements/Svg.tsx
+++ b/src/elements/Svg.tsx
@@ -115,6 +115,7 @@ export default class Svg extends Shape {
width,
height,
focusable,
+ transform,
// Inherited G properties
font,
@@ -182,10 +183,18 @@ export default class Svg extends Shape {
props.onLayout = onLayout;
}
- // transform should not be passed down since it is already used in svgView
- // and would be doubled in G causing double transformations
const gStyle = Object.assign({}, style) as ViewStyle;
- gStyle.transform = undefined;
+ // if transform prop is of RN style's kind, we want `SvgView` to handle it
+ // since it can be done here. Otherwise, if transform is of `svg` kind, e.g. string,
+ // we want G element to parse it since `Svg` does not include parsing of those custom transforms.
+ // It is problematic due to fact that we either move the `Svg` or just its `G` child, and in the
+ // second case, when the `G` leaves the area of `Svg`, it will just disappear.
+ if (Array.isArray(transform) && typeof transform[0] === 'object') {
+ gStyle.transform = undefined;
+ } else {
+ props.transform = undefined;
+ gStyle.transform = transform;
+ }
const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;
diff --git a/src/lib/extract/extractFill.ts b/src/lib/extract/extractFill.ts
index 78842ee8..3070ab82 100644
--- a/src/lib/extract/extractFill.ts
+++ b/src/lib/extract/extractFill.ts
@@ -8,7 +8,7 @@ const fillRules: { evenodd: number; nonzero: number } = {
nonzero: 1,
};
-const defaultFill = processColor('black');
+const defaultFill = { type: 0, payload: processColor('black') };
export default function extractFill(
o: extractedProps,