SvgTouchableMixin[key]);
+const numTouchKeys = touchKeys.length;
+
+export interface SVGBoundingBoxOptions {
+ fill?: boolean;
+ stroke?: boolean;
+ markers?: boolean;
+ clipped?: boolean;
+}
+
+export interface DOMPointInit {
+ x?: number;
+ y?: number;
+ z?: number;
+ w?: number;
+}
+
+export interface Point {
+ x: number;
+ y: number;
+}
+
+export interface SVGPoint extends Point {
+ constructor(point?: Point): SVGPoint;
+ matrixTransform(matrix: Matrix): SVGPoint;
+}
+
+export interface Rect {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
+export interface SVGRect extends Rect {}
+
+export interface Matrix {
+ a: number;
+ b: number;
+ c: number;
+ d: number;
+ e: number;
+ f: number;
+}
+
+export interface SVGMatrix extends Matrix {
+ constructor(matrix?: Matrix): SVGMatrix;
+ multiply(secondMatrix: Matrix): SVGMatrix;
+ inverse(): SVGMatrix;
+ translate(x: number, y: number): SVGMatrix;
+ scale(scaleFactor: number): SVGMatrix;
+ scaleNonUniform(scaleFactorX: number, scaleFactorY: number): SVGMatrix;
+ rotate(angle: number): SVGMatrix;
+ rotateFromVector(x: number, y: number): SVGMatrix;
+ flipX(): SVGMatrix;
+ flipY(): SVGMatrix;
+ skewX(angle: number): SVGMatrix;
+ skewY(angle: number): SVGMatrix;
+}
+
+export function multiply_matrices(l: Matrix, r: Matrix): Matrix {
+ const { a: al, b: bl, c: cl, d: dl, e: el, f: fl } = l;
+ const { a: ar, b: br, c: cr, d: dr, e: er, f: fr } = r;
+
+ const a = al * ar + cl * br;
+ const c = al * cr + cl * dr;
+ const e = al * er + cl * fr + el;
+ const b = bl * ar + dl * br;
+ const d = bl * cr + dl * dr;
+ const f = bl * er + dl * fr + fl;
+
+ return { a, c, e, b, d, f };
+}
+
+export function invert({ a, b, c, d, e, f }: Matrix): Matrix {
+ const n = a * d - b * c;
+ return {
+ a: d / n,
+ b: -b / n,
+ c: -c / n,
+ d: a / n,
+ e: (c * f - d * e) / n,
+ f: -(a * f - b * e) / n,
+ };
+}
+
+const deg2rad = Math.PI / 180;
+
+export class SVGMatrix implements SVGMatrix {
+ constructor(matrix?: Matrix) {
+ if (matrix) {
+ const { a, b, c, d, e, f } = matrix;
+ this.a = a;
+ this.b = b;
+ this.c = c;
+ this.d = d;
+ this.e = e;
+ this.f = f;
+ } else {
+ this.a = 1;
+ this.b = 0;
+ this.c = 0;
+ this.d = 1;
+ this.e = 0;
+ this.f = 0;
+ }
+ }
+ multiply(secondMatrix: Matrix): SVGMatrix {
+ return new SVGMatrix(multiply_matrices(this, secondMatrix));
+ }
+ inverse(): SVGMatrix {
+ return new SVGMatrix(invert(this));
+ }
+ translate(x: number, y: number): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, { a: 1, b: 0, c: 0, d: 1, e: x, f: y }),
+ );
+ }
+ scale(scaleFactor: number): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, {
+ a: scaleFactor,
+ b: 0,
+ c: 0,
+ d: scaleFactor,
+ e: 0,
+ f: 0,
+ }),
+ );
+ }
+ scaleNonUniform(scaleFactorX: number, scaleFactorY: number): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, {
+ a: scaleFactorX,
+ b: 0,
+ c: 0,
+ d: scaleFactorY,
+ e: 0,
+ f: 0,
+ }),
+ );
+ }
+ rotate(angle: number): SVGMatrix {
+ const cos = Math.cos(deg2rad * angle);
+ const sin = Math.sin(deg2rad * angle);
+ return new SVGMatrix(
+ multiply_matrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 }),
+ );
+ }
+ rotateFromVector(x: number, y: number): SVGMatrix {
+ const angle = Math.atan2(y, x);
+ const cos = Math.cos(deg2rad * angle);
+ const sin = Math.sin(deg2rad * angle);
+ return new SVGMatrix(
+ multiply_matrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 }),
+ );
+ }
+ flipX(): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+ );
+ }
+ flipY(): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, { a: 1, b: 0, c: 0, d: -1, e: 0, f: 0 }),
+ );
+ }
+ skewX(angle: number): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, {
+ a: 1,
+ b: 0,
+ c: Math.tan(deg2rad * angle),
+ d: 1,
+ e: 0,
+ f: 0,
+ }),
+ );
+ }
+ skewY(angle: number): SVGMatrix {
+ return new SVGMatrix(
+ multiply_matrices(this, {
+ a: 1,
+ b: Math.tan(deg2rad * angle),
+ c: 0,
+ d: 1,
+ e: 0,
+ f: 0,
+ }),
+ );
+ }
+}
+
+export function matrixTransform(matrix: Matrix, point: Point): Point {
+ const { a, b, c, d, e, f } = matrix;
+ const { x, y } = point;
+ return {
+ x: a * x + c * y + e,
+ y: b * x + d * y + f,
+ };
+}
+
+export class SVGPoint implements SVGPoint {
+ constructor(point?: Point) {
+ if (point) {
+ const { x, y } = point;
+ this.x = x;
+ this.y = y;
+ } else {
+ this.x = 0;
+ this.y = 0;
+ }
+ }
+ matrixTransform(matrix: Matrix): SVGPoint {
+ return new SVGPoint(matrixTransform(matrix, this));
+ }
+}
+
+export const ownerSVGElement = {
+ createSVGPoint(): SVGPoint {
+ return new SVGPoint();
+ },
+ createSVGMatrix(): SVGMatrix {
+ return new SVGMatrix();
+ },
+};
+
+export default class Shape extends Component
{
+ [x: string]: unknown;
+ root: (Shape
& NativeMethodsMixinStatic) | null = null;
+ constructor(props: P, context: {}) {
+ super(props, context);
+ for (let i = 0; i < numTouchKeys; i++) {
+ const key = touchKeys[i];
+ const val = touchVals[i];
+ if (typeof val === 'function') {
+ this[key] = val.bind(this);
+ } else {
+ this[key] = val;
+ }
+ }
+ this.state = touchableGetInitialState();
+ }
+ refMethod: (
+ instance: (Shape
& NativeMethodsMixinStatic) | null,
+ ) => void = (instance: (Shape
& NativeMethodsMixinStatic) | null) => {
+ this.root = instance;
+ };
+ setNativeProps = (
+ props: Object & {
+ matrix?: [number, number, number, number, number, number];
+ } & TransformProps,
+ ) => {
+ this.root && this.root.setNativeProps(props);
+ };
+ /*
+ * The following native methods are experimental and likely broken in some
+ * ways. If you have a use case for these, please open an issue with a
+ * representative example / reproduction.
+ * */
+ getBBox = (options?: SVGBoundingBoxOptions): SVGRect => {
+ const { fill = true, stroke = true, markers = true, clipped = true } =
+ options || {};
+ const handle = findNodeHandle(this.root as Component);
+ return RNSVGRenderableManager.getBBox(handle, {
+ fill,
+ stroke,
+ markers,
+ clipped,
+ });
+ };
+ getCTM = (): SVGMatrix => {
+ const handle = findNodeHandle(this.root as Component);
+ return new SVGMatrix(RNSVGRenderableManager.getCTM(handle));
+ };
+ getScreenCTM = (): SVGMatrix => {
+ const handle = findNodeHandle(this.root as Component);
+ return new SVGMatrix(RNSVGRenderableManager.getScreenCTM(handle));
+ };
+ isPointInFill = (options: DOMPointInit): boolean => {
+ const handle = findNodeHandle(this.root as Component);
+ return RNSVGRenderableManager.isPointInFill(handle, options);
+ };
+ isPointInStroke = (options: DOMPointInit): boolean => {
+ const handle = findNodeHandle(this.root as Component);
+ return RNSVGRenderableManager.isPointInStroke(handle, options);
+ };
+ getTotalLength = (): number => {
+ const handle = findNodeHandle(this.root as Component);
+ return RNSVGRenderableManager.getTotalLength(handle);
+ };
+ getPointAtLength = (length: number): SVGPoint => {
+ const handle = findNodeHandle(this.root as Component);
+ return new SVGPoint(
+ RNSVGRenderableManager.getPointAtLength(handle, { length }),
+ );
+ };
+}
+Shape.prototype.ownerSVGElement = ownerSVGElement;
diff --git a/elements/Stop.js b/src/elements/Stop.tsx
similarity index 63%
rename from elements/Stop.js
rename to src/elements/Stop.tsx
index 3f0d2f82d..0cd502979 100644
--- a/elements/Stop.js
+++ b/src/elements/Stop.tsx
@@ -1,12 +1,13 @@
import { Component } from 'react';
-export default class Stop extends Component {
+type StopProps = {
+ parent?: Component;
+};
+
+export default class Stop extends Component {
+ props!: StopProps;
static displayName = 'Stop';
- static defaultProps = {
- stopColor: '#000',
- stopOpacity: 1,
- };
setNativeProps = () => {
const { parent } = this.props;
if (parent) {
diff --git a/elements/Svg.js b/src/elements/Svg.tsx
similarity index 58%
rename from elements/Svg.js
rename to src/elements/Svg.tsx
index 2ed783b8b..64ca1010e 100644
--- a/elements/Svg.js
+++ b/src/elements/Svg.tsx
@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { Component } from 'react';
import {
requireNativeComponent,
StyleSheet,
findNodeHandle,
NativeModules,
+ MeasureOnSuccessCallback,
+ MeasureLayoutOnSuccessCallback,
+ MeasureInWindowOnSuccessCallback,
} from 'react-native';
+import {
+ Color,
+ ClipProps,
+ FillProps,
+ NumberProp,
+ StrokeProps,
+ ResponderProps,
+ TransformProps,
+ ResponderInstanceProps,
+} from '../lib/extract/types';
import extractResponder from '../lib/extract/extractResponder';
import extractViewBox from '../lib/extract/extractViewBox';
+import extractColor from '../lib/extract/extractColor';
import Shape from './Shape';
import G from './G';
@@ -19,26 +33,51 @@ const styles = StyleSheet.create({
},
});
-export default class Svg extends Shape {
+export default class Svg extends Shape<
+ {
+ color?: Color;
+ style?: [] | {};
+ viewBox?: string;
+ opacity?: NumberProp;
+ onLayout?: () => void;
+ preserveAspectRatio?: string;
+ } & TransformProps &
+ ResponderProps &
+ StrokeProps &
+ FillProps &
+ ClipProps
+> {
static displayName = 'Svg';
static defaultProps = {
preserveAspectRatio: 'xMidYMid meet',
};
- measureInWindow = (...args) => {
- this.root.measureInWindow(...args);
+ measureInWindow = (callback: MeasureInWindowOnSuccessCallback) => {
+ this.root && this.root.measureInWindow(callback);
};
- measure = (...args) => {
- this.root.measure(...args);
+ measure = (callback: MeasureOnSuccessCallback) => {
+ this.root && this.root.measure(callback);
};
- measureLayout = (...args) => {
- this.root.measureLayout(...args);
+ measureLayout = (
+ relativeToNativeNode: number,
+ onSuccess: MeasureLayoutOnSuccessCallback,
+ onFail: () => void /* currently unused */,
+ ) => {
+ this.root &&
+ this.root.measureLayout(relativeToNativeNode, onSuccess, onFail);
};
- setNativeProps = props => {
+ setNativeProps = (
+ props: Object & {
+ width?: NumberProp;
+ height?: NumberProp;
+ bbWidth?: NumberProp;
+ bbHeight?: NumberProp;
+ },
+ ) => {
const { width, height } = props;
if (width) {
props.bbWidth = width;
@@ -46,20 +85,20 @@ export default class Svg extends Shape {
if (height) {
props.bbHeight = height;
}
- this.root.setNativeProps(props);
+ this.root && this.root.setNativeProps(props);
};
- toDataURL = (callback, options) => {
+ toDataURL = (callback: () => void, options?: Object) => {
if (!callback) {
return;
}
- const handle = findNodeHandle(this.root);
+ const handle = findNodeHandle(this.root as Component);
RNSVGSvgViewManager.toDataURL(handle, options, callback);
};
render() {
const {
- opacity,
+ opacity = 1,
viewBox,
preserveAspectRatio,
style,
@@ -68,13 +107,14 @@ export default class Svg extends Shape {
...props
} = this.props;
const stylesAndProps = {
- ...(style && style.length ? Object.assign({}, ...style) : style),
+ ...(Array.isArray(style) ? Object.assign({}, ...style) : style),
...props,
};
const {
color,
width,
height,
+ focusable,
// Inherited G properties
font,
@@ -112,16 +152,19 @@ export default class Svg extends Shape {
}
: null;
+ const tint = extractColor(color);
return (
-
-
+
);
}
}
-const NativeSvgView = requireNativeComponent('RNSVGSvgView');
+export const RNSVGSvg = requireNativeComponent('RNSVGSvgView');
diff --git a/elements/Symbol.js b/src/elements/Symbol.tsx
similarity index 57%
rename from elements/Symbol.js
rename to src/elements/Symbol.tsx
index c88f33931..d2c72d255 100644
--- a/elements/Symbol.js
+++ b/src/elements/Symbol.tsx
@@ -3,18 +3,22 @@ import { requireNativeComponent } from 'react-native';
import extractViewBox from '../lib/extract/extractViewBox';
import Shape from './Shape';
-export default class Symbol extends Shape {
+export default class Symbol extends Shape<{
+ id?: string;
+ viewBox?: string;
+ preserveAspectRatio?: string;
+}> {
static displayName = 'Symbol';
render() {
const { props } = this;
const { id, children } = props;
return (
-
+
{children}
);
}
}
-const RNSVGSymbol = requireNativeComponent('RNSVGSymbol');
+export const RNSVGSymbol = requireNativeComponent('RNSVGSymbol');
diff --git a/elements/TSpan.js b/src/elements/TSpan.tsx
similarity index 66%
rename from elements/TSpan.js
rename to src/elements/TSpan.tsx
index 94872861f..8ab266a38 100644
--- a/elements/TSpan.js
+++ b/src/elements/TSpan.tsx
@@ -1,22 +1,28 @@
-import React from 'react';
+import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
import extractTransform from '../lib/extract/extractTransform';
import extractText, { setTSpan } from '../lib/extract/extractText';
import { pickNotNil } from '../lib/util';
import Shape from './Shape';
+import { TransformProps } from '../lib/extract/types';
-export default class TSpan extends Shape {
+export default class TSpan extends Shape<{}> {
static displayName = 'TSpan';
- setNativeProps = props => {
+ setNativeProps = (
+ props: Object & {
+ matrix?: number[];
+ style?: [] | {};
+ } & TransformProps,
+ ) => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const prop = propsAndStyles(props);
Object.assign(prop, pickNotNil(extractText(prop, false)));
- this.root.setNativeProps(prop);
+ this.root && this.root.setNativeProps(prop);
};
render() {
@@ -30,11 +36,11 @@ export default class TSpan extends Shape {
this,
);
Object.assign(props, extractText(prop, false));
- props.ref = this.refMethod;
+ props.ref = this.refMethod as (instance: Component | null) => void;
return ;
}
}
setTSpan(TSpan);
-const RNSVGTSpan = requireNativeComponent('RNSVGTSpan');
+export const RNSVGTSpan = requireNativeComponent('RNSVGTSpan');
diff --git a/elements/Text.js b/src/elements/Text.tsx
similarity index 60%
rename from elements/Text.js
rename to src/elements/Text.tsx
index 24a586cd4..47f0f6d21 100644
--- a/elements/Text.js
+++ b/src/elements/Text.tsx
@@ -1,23 +1,29 @@
-import React from 'react';
+import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
import extractText from '../lib/extract/extractText';
import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
import extractTransform from '../lib/extract/extractTransform';
+import { TransformProps } from '../lib/extract/types';
import { pickNotNil } from '../lib/util';
import Shape from './Shape';
import './TSpan';
-export default class Text extends Shape {
+export default class Text extends Shape<{}> {
static displayName = 'Text';
- setNativeProps = props => {
- const matrix = !props.matrix && extractTransform(props);
+ setNativeProps = (
+ props: Object & {
+ matrix?: number[];
+ style?: [] | {};
+ } & TransformProps,
+ ) => {
+ const matrix = props && !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const prop = propsAndStyles(props);
Object.assign(prop, pickNotNil(extractText(prop, true)));
- this.root.setNativeProps(prop);
+ this.root && this.root.setNativeProps(prop);
};
render() {
@@ -31,9 +37,9 @@ export default class Text extends Shape {
this,
);
Object.assign(props, extractText(prop, true));
- props.ref = this.refMethod;
+ props.ref = this.refMethod as (instance: Component | null) => void;
return ;
}
}
-const RNSVGText = requireNativeComponent('RNSVGText');
+export const RNSVGText = requireNativeComponent('RNSVGText');
diff --git a/elements/TextPath.js b/src/elements/TextPath.tsx
similarity index 58%
rename from elements/TextPath.js
rename to src/elements/TextPath.tsx
index 7d2ddd2cf..54c68c258 100644
--- a/elements/TextPath.js
+++ b/src/elements/TextPath.tsx
@@ -1,22 +1,38 @@
-import React from 'react';
+import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
import extractTransform from '../lib/extract/extractTransform';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
+import { NumberProp, TransformProps } from '../lib/extract/types';
import extractText from '../lib/extract/extractText';
import { idPattern, pickNotNil } from '../lib/util';
import Shape from './Shape';
import TSpan from './TSpan';
-export default class TextPath extends Shape {
+export default class TextPath extends Shape<{
+ children?: NumberProp | [NumberProp | React.ComponentType];
+ alignmentBaseline?: string;
+ startOffset?: NumberProp;
+ xlinkHref?: string;
+ midLine?: string;
+ spacing?: string;
+ method?: string;
+ href?: string;
+ side?: string;
+}> {
static displayName = 'TextPath';
- setNativeProps = props => {
+ setNativeProps = (
+ props: Object & {
+ matrix?: number[];
+ style?: [] | {};
+ } & TransformProps,
+ ) => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
Object.assign(props, pickNotNil(extractText(props, true)));
- this.root.setNativeProps(props);
+ this.root && this.root.setNativeProps(props);
};
render() {
@@ -35,14 +51,7 @@ export default class TextPath extends Shape {
const matched = href && href.match(idPattern);
const match = matched && matched[1];
if (match) {
- const props = extractProps(
- {
- ...propsAndStyles(prop),
- x: null,
- y: null,
- },
- this,
- );
+ const props = withoutXY(this, prop);
Object.assign(
props,
extractText(
@@ -61,7 +70,7 @@ export default class TextPath extends Shape {
midLine,
},
);
- props.ref = this.refMethod;
+ props.ref = this.refMethod as (instance: Component | null) => void;
return ;
}
@@ -70,8 +79,12 @@ export default class TextPath extends Shape {
href +
'"',
);
- return {children};
+ return (
+ void}>
+ {children}
+
+ );
}
}
-const RNSVGTextPath = requireNativeComponent('RNSVGTextPath');
+export const RNSVGTextPath = requireNativeComponent('RNSVGTextPath');
diff --git a/elements/Use.js b/src/elements/Use.tsx
similarity index 67%
rename from elements/Use.js
rename to src/elements/Use.tsx
index 93efa87cf..a554e26f4 100644
--- a/elements/Use.js
+++ b/src/elements/Use.tsx
@@ -1,10 +1,18 @@
import React from 'react';
import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
+import { NumberProp } from '../lib/extract/types';
import { idPattern } from '../lib/util';
import Shape from './Shape';
-export default class Use extends Shape {
+export default class Use extends Shape<{
+ x?: NumberProp;
+ y?: NumberProp;
+ width?: NumberProp;
+ height?: NumberProp;
+ xlinkHref?: string;
+ href?: string;
+}> {
static displayName = 'Use';
static defaultProps = {
@@ -26,7 +34,7 @@ export default class Use extends Shape {
href = xlinkHref,
} = props;
- const matched = href.match(idPattern);
+ const matched = href && href.match(idPattern);
const match = matched && matched[1];
if (!match) {
@@ -40,7 +48,7 @@ export default class Use extends Shape {
return (
+ | NumberProp;
+export type LengthAdjust = 'spacing' | 'spacingAndGlyphs';
+
+export type TextPathMethod = 'align' | 'stretch';
+export type TextPathSpacing = 'auto' | 'exact';
+export type TextPathMidLine = 'sharp' | 'smooth';
+
+export type Linecap = 'butt' | 'square' | 'round';
+export type Linejoin = 'miter' | 'bevel' | 'round';
+
+export interface TouchableProps {
+ disabled?: boolean;
+ onPress?: (event: GestureResponderEvent) => void;
+ onPressIn?: (event: GestureResponderEvent) => void;
+ onPressOut?: (event: GestureResponderEvent) => void;
+ onLongPress?: (event: GestureResponderEvent) => void;
+ delayPressIn?: number;
+ delayPressOut?: number;
+ delayLongPress?: number;
+}
+
+export interface ResponderProps extends ReactNative.GestureResponderHandlers {
+ pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
+}
+
+// rgba values inside range 0 to 1 inclusive
+// rgbaArray = [r, g, b, a]
+export type rgbaArray = ReadonlyArray;
+
+// argb values inside range 0x00 to 0xff inclusive
+// int32ARGBColor = 0xaarrggbb
+export type int32ARGBColor = number;
+
+export type Color = int32ARGBColor | rgbaArray | string;
+
+export interface FillProps {
+ fill?: Color;
+ fillOpacity?: NumberProp;
+ fillRule?: FillRule;
+}
+
+export interface ClipProps {
+ clipRule?: FillRule;
+ clipPath?: string;
+}
+
+export interface VectorEffectProps {
+ vectorEffect?:
+ | 'none'
+ | 'non-scaling-stroke'
+ | 'nonScalingStroke'
+ | 'default'
+ | 'inherit'
+ | 'uri';
+}
+
+export interface DefinitionProps {
+ id?: string;
+}
+
+export interface StrokeProps {
+ stroke?: Color;
+ strokeWidth?: NumberProp;
+ strokeOpacity?: NumberProp;
+ strokeDasharray?: ReadonlyArray | NumberProp;
+ strokeDashoffset?: NumberProp;
+ strokeLinecap?: Linecap;
+ strokeLinejoin?: Linejoin;
+ strokeMiterlimit?: NumberProp;
+}
+
+export interface FontObject {
+ fontStyle?: FontStyle;
+ fontVariant?: FontVariant;
+ fontWeight?: FontWeight;
+ fontStretch?: FontStretch;
+ fontSize?: NumberProp;
+ fontFamily?: string;
+ textAnchor?: TextAnchor;
+ textDecoration?: TextDecoration;
+ letterSpacing?: NumberProp;
+ wordSpacing?: NumberProp;
+ kerning?: NumberProp;
+ fontFeatureSettings?: string;
+ fontVariantLigatures?: FontVariantLigatures;
+ fontVariationSettings?: string;
+}
+
+export interface FontProps extends FontObject {
+ font?: FontObject;
+}
+
+export interface TransformObject {
+ translate?: NumberArray;
+ translateX?: NumberProp;
+ translateY?: NumberProp;
+ origin?: NumberArray;
+ originX?: NumberProp;
+ originY?: NumberProp;
+ scale?: NumberArray;
+ scaleX?: NumberProp;
+ scaleY?: NumberProp;
+ skew?: NumberArray;
+ skewX?: NumberProp;
+ skewY?: NumberProp;
+ rotation?: NumberProp;
+ x?: NumberArray;
+ y?: NumberArray;
+}
+
+/*
+
+ ColumnMajorTransformMatrix
+
+ [a, b, c, d, tx, ty]
+
+ This matrix can be visualized as:
+
+ ╔═ ═╗
+ ║ a c tx ║
+ ║ b d ty ║
+ ║ 0 0 1 ║
+ ╚═ ═╝
+
+*/
+export type ColumnMajorTransformMatrix = [
+ number,
+ number,
+ number,
+ number,
+ number,
+ number,
+];
+
+export interface TransformProps extends TransformObject {
+ transform?: ColumnMajorTransformMatrix | string | TransformObject;
+}
+
+export interface CommonMaskProps {
+ mask?: string;
+}
+
+export interface CommonMarkerProps {
+ marker?: string;
+ markerStart?: string;
+ markerMid?: string;
+ markerEnd?: string;
+}
+
+export interface CommonPathProps
+ extends FillProps,
+ StrokeProps,
+ ClipProps,
+ TransformProps,
+ VectorEffectProps,
+ ResponderProps,
+ TouchableProps,
+ DefinitionProps,
+ CommonMarkerProps,
+ CommonMaskProps {}
+
+// Element props
+export interface CircleProps extends CommonPathProps {
+ cx?: NumberProp;
+ cy?: NumberProp;
+ opacity?: NumberProp;
+ r?: NumberProp;
+}
+export const Circle: React.ComponentClass