From 2fde0b6111dde2f52bae08fef7fe122078562b97 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 5 Dec 2018 09:48:08 +0100 Subject: [PATCH 1/2] Fix SVG styles for mobile --- packages/components/src/primitives/svg/index.native.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js index 47c49b1bb61289..e485897375a329 100644 --- a/packages/components/src/primitives/svg/index.native.js +++ b/packages/components/src/primitives/svg/index.native.js @@ -17,13 +17,9 @@ export { } from 'react-native-svg'; export const SVG = ( props ) => { - // We're using the react-native-classname-to-style plugin, so when a `className` prop is passed it gets converted to `style` here. - // Given it carries a string (as it was originally className) but an object is expected for `style`, - // we need to check whether `style` exists and is a string, and convert it to an object - let styleValues = {}; - if ( typeof props.style === 'string' ) { - const oneStyle = props.style.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean ); + if ( typeof props.className === 'string' ) { + const oneStyle = props.className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean ); styleValues = Object.assign( styleValues, ...oneStyle ); } From 55474f92f8c8fc4c1562f9605030076c17256770 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Thu, 6 Dec 2018 09:37:30 +0100 Subject: [PATCH 2/2] Simplify condition since className is always a string --- packages/components/src/primitives/svg/index.native.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js index e485897375a329..b0272e6b5a7b9f 100644 --- a/packages/components/src/primitives/svg/index.native.js +++ b/packages/components/src/primitives/svg/index.native.js @@ -17,12 +17,8 @@ export { } from 'react-native-svg'; export const SVG = ( props ) => { - let styleValues = {}; - if ( typeof props.className === 'string' ) { - const oneStyle = props.className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean ); - styleValues = Object.assign( styleValues, ...oneStyle ); - } - + const stylesFromClasses = ( props.className || '' ).split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean ); + const styleValues = Object.assign( {}, props.style, ...stylesFromClasses ); const safeProps = { ...props, style: styleValues }; return (