index.js
function prepare(props) {
  const clean = rip(props,
    'translate', 'scale', 'rotate', 'skewX', 'skewY', 'originX', 'originY',
    'fontFamily', 'fontSize', 'fontWeight', 'fontStyle',
    'style'
  );

  const transform = [];

  //
  // Correctly apply the transformation properties.
  // To apply originX and originY we need to translate the element on those values and
  // translate them back once the element is scaled, rotated and skewed.
  //
  if ('originX' in props || 'originY' in props) transform.push(`translate(${props.originX || 0}, ${props.originY || 0})`);
  if ('translate' in props) transform.push(`translate(${props.translate})`);
  if ('scale' in props) transform.push(`scale(${props.scale})`);
  if ('rotate' in props) transform.push(`rotate(${props.rotate})`);
  if ('skewX' in props) transform.push(`skewX(${props.skewX})`);
  if ('skewY' in props) transform.push(`skewY(${props.skewY})`);
  if ('originX' in props || 'originY' in props) transform.push(`translate(${-props.originX || 0}, ${-props.originY || 0})`);
  if (transform.length) clean.transform = transform.join(' ');

  //
  // Correctly set the initial style value.
  //
  const style = ('style' in props) ? props.style : {};

  //
  // This is the nasty part where we depend on React internals to work as
  // intended. If we add an empty object as style, it shouldn't render a `style`
  // attribute. So we can safely conditionally add things to our `style` object
  // and re-introduce it to our `clean` object
  //
  copypaste(props, style, 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle');
  clean.style = style;

  //
  // React-Native svg provides as a default of `xMidYMid` if aspectRatio is not
  // specified with align information. So we need to support this behavior and
  // correctly default to `xMidYMid [mode]`.
  //
  const preserve = clean.preserveAspectRatio;
  if (preserve && preserve !== 'none' && !~preserve.indexOf(' ')) {
    clean.preserveAspectRatio = 'xMidYMid ' + preserve;
  }

  return clean;
}
function prepare(props) {
  const clean = rip(props,
    'translate', 'scale', 'rotate', 'skewX', 'skewY', 'originX', 'originY',
    'fontFamily', 'fontSize', 'fontWeight', 'fontStyle',
    'style'
  );

  const transform = [];

  //
  // Correctly apply the transformation properties.
  // To apply originX and originY we need to translate the element on those values and
  // translate them back once the element is scaled, rotated and skewed.
  //
  if ('originX' in props || 'originY' in props) transform.push(`translate(${props.originX || 0}, ${props.originY || 0})`);
  if ('translate' in props) transform.push(`translate(${props.translate})`);
  if ('scale' in props) transform.push(`scale(${props.scale})`);
  if ('rotate' in props) transform.push(`rotate(${props.rotate})`);
  if ('skewX' in props) transform.push(`skewX(${props.skewX})`);
  if ('skewY' in props) transform.push(`skewY(${props.skewY})`);
  if ('originX' in props || 'originY' in props) transform.push(`translate(${-props.originX || 0}, ${-props.originY || 0})`);
  if (transform.length) clean.transform = transform.join(' ');

  //
  // Correctly set the initial style value.
  //
  const style = ('style' in props) ? props.style : {};

  //
  // This is the nasty part where we depend on React internals to work as
  // intended. If we add an empty object as style, it shouldn't render a `style`
  // attribute. So we can safely conditionally add things to our `style` object
  // and re-introduce it to our `clean` object
  //
  copypaste(props, style, 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle');
  clean.style = style;

  //
  // React-Native svg provides as a default of `xMidYMid` if aspectRatio is not
  // specified with align information. So we need to support this behavior and
  // correctly default to `xMidYMid [mode]`.
  //
  const preserve = clean.preserveAspectRatio;
  if (preserve && preserve !== 'none' && !~preserve.indexOf(' ')) {
    clean.preserveAspectRatio = 'xMidYMid ' + preserve;
  }

  return clean;
}
function prepare ( props ) { const clean = rip ( props , 'translate' , 'scale' , 'rotate' , 'skewX' , 'skewY' , 'originX' , 'originY' , 'fontFamily' , 'fontSize' , 'fontWeight' , 'fontStyle' , 'style' ) ; const transform = [ ] ; // // Correctly apply the transformation properties. // To apply originX and originY we need to translate the element on those values and // translate them back once the element is scaled, rotated and skewed. // if ( 'originX' in props || 'originY' in props ) transform . push ( ` ${ props . originX || 0 } ${ props . originY || 0 } ` ) ; if ( 'translate' in props ) transform . push ( ` ${ props . translate } ` ) ; if ( 'scale' in props ) transform . push ( ` ${ props . scale } ` ) ; if ( 'rotate' in props ) transform . push ( ` ${ props . rotate } ` ) ; if ( 'skewX' in props ) transform . push ( ` ${ props . skewX } ` ) ; if ( 'skewY' in props ) transform . push ( ` ${ props . skewY } ` ) ; if ( 'originX' in props || 'originY' in props ) transform . push ( ` ${ - props . originX || 0 } ${ - props . originY || 0 } ` ) ; if ( transform . length ) clean . transform = transform . join ( ' ' ) ; // // Correctly set the initial style value. // const style = ( 'style' in props ) ? props . style : { } ; // // This is the nasty part where we depend on React internals to work as // intended. If we add an empty object as style, it shouldn't render a `style` // attribute. So we can safely conditionally add things to our `style` object // and re-introduce it to our `clean` object // copypaste ( props , style , 'fontFamily' , 'fontSize' , 'fontWeight' , 'fontStyle' ) ; clean . style = style ; // // React-Native svg provides as a default of `xMidYMid` if aspectRatio is not // specified with align information. So we need to support this behavior and // correctly default to `xMidYMid [mode]`. // const preserve = clean . preserveAspectRatio ; if ( preserve && preserve !== 'none' && ! ~ preserve . indexOf ( ' ' ) ) { clean . preserveAspectRatio = 'xMidYMid ' + preserve ; } return clean ; }
The `react-native-svg` has some crazy api's that do not match with the
properties that can be applied to SVG elements. This prepare function removes
those properties and adds the properties back in their correct location.

@param {Object} props Properties given to us.
@returns {Object} Cleaned object.
@private
The react - native - svg has some crazy api s that do not match with the properties that can be applied to SVG elements . This prepare function removes those properties and adds the properties back in their correct location .