Skip to content

Instantly share code, notes, and snippets.

@JCMais

JCMais/react-native-svg.js

Last active Aug 26, 2020
Embed
What would you like to do?
React Native SVG mock to be used with jest, put in __mocks__ dir in the src dir.
// @flow
// https://github.com/FormidableLabs/react-native-svg-mock
import React from 'react';
const createComponent = function(name: string) {
return class extends React.Component {
// overwrite the displayName, since this is a class created dynamically
static displayName = name;
render() {
return React.createElement(name, this.props, this.props.children);
}
};
};
// Mock all react-native-svg exports
// from https://github.com/magicismight/react-native-svg/blob/master/index.js
const Svg = createComponent('Svg');
const Circle = createComponent('Circle');
const Ellipse = createComponent('Ellipse');
const G = createComponent('G');
const Text = createComponent('Text');
const TextPath = createComponent('TextPath');
const TSpan = createComponent('TSpan');
const Path = createComponent('Path');
const Polygon = createComponent('Polygon');
const Polyline = createComponent('Polyline');
const Line = createComponent('Line');
const Rect = createComponent('Rect');
const Use = createComponent('Use');
const Image = createComponent('Image');
const Symbol = createComponent('Symbol');
const Defs = createComponent('Defs');
const LinearGradient = createComponent('LinearGradient');
const RadialGradient = createComponent('RadialGradient');
const Stop = createComponent('Stop');
const ClipPath = createComponent('ClipPath');
const Pattern = createComponent('Pattern');
const Mask = createComponent('Mask');
export {
Svg,
Circle,
Ellipse,
G,
Text,
TextPath,
TSpan,
Path,
Polygon,
Polyline,
Line,
Rect,
Use,
Image,
Symbol,
Defs,
LinearGradient,
RadialGradient,
Stop,
ClipPath,
Pattern,
Mask,
};
export default Svg;
@Ian-GL

This comment has been minimized.

Copy link

@Ian-GL Ian-GL commented Feb 6, 2019

This was really useful for me. However, it is missing two elements present in the index file: Pattern and Mask.

@Marcos-Costa

This comment has been minimized.

Copy link

@Marcos-Costa Marcos-Costa commented Jul 22, 2019

This was really useful for me. However, it is missing two elements present in the index file: Pattern and Mask.

@Ian-GL can you specify which lines you have changed?

@JCMais

This comment has been minimized.

Copy link
Owner Author

@JCMais JCMais commented Jul 22, 2019

@Marcos-Costa I've edited the gist with the two new elements

@Marcos-Costa

This comment has been minimized.

Copy link

@Marcos-Costa Marcos-Costa commented Jul 22, 2019

@Marcos-Costa I've edited the gist with the two new elements

Thx @JCMais

@Marcos-Costa

This comment has been minimized.

Copy link

@Marcos-Costa Marcos-Costa commented Jul 22, 2019

@JCMais Do you know if is there a way to use it with react-native-svg-transformer?

@JCMais

This comment has been minimized.

Copy link
Owner Author

@JCMais JCMais commented Jul 25, 2019

@Marcos-Costa, sorry, idk. Never used that lib

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.