Last active
August 1, 2023 00:12
-
-
Save JCMais/8302a1646ccc9759237947a66bdda8e0 to your computer and use it in GitHub Desktop.
React Native SVG mock to be used with jest, put in __mocks__ dir in the src dir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @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; |
This was really useful for me. However, it is missing two elements present in the index file:
Pattern
andMask
.
@Ian-GL can you specify which lines you have changed?
@marcos-costa I've edited the gist with the two new elements
@marcos-costa I've edited the gist with the two new elements
Thx @JCMais
@JCMais Do you know if is there a way to use it with react-native-svg-transformer?
@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
This was really useful for me. However, it is missing two elements present in the index file:
Pattern
andMask
.