feat: use forwardRef on React Native

See #184

Author: gregberge

packages/cli/src/__snapshots__/index.test.js.snap

@@ -210,7 +210,11 @@ const SvgFile = ({ svgRef, ...props }) => (
   </Svg>
 )
 
-export default SvgFile
+const ForwardRef = React.forwardRef((props, ref) => (
+  <SvgFile svgRef={ref} {...props} />
+))
+
+export default ForwardRef
 
 "
 `;

packages/core/src/__snapshots__/convert.test.js.snap

@@ -164,7 +164,11 @@ const SvgComponent = ({ svgRef, ...props }) => (
   </Svg>
 )
 
-export default SvgComponent
+const ForwardRef = React.forwardRef((props, ref) => (
+  <SvgComponent svgRef={ref} {...props} />
+))
+
+export default ForwardRef
 "
 `;
 

packages/core/src/templates/__snapshots__/reactNativeTemplate.test.js.snap

@@ -39,7 +39,9 @@ exports[`reactNativeTemplate should wrap code into a component 3`] = `
 import Svg from 'react-native-svg';
 const Test = ({ svgRef }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;
 
 exports[`reactNativeTemplate should wrap code into a component 4`] = `
@@ -55,7 +57,9 @@ exports[`reactNativeTemplate should wrap code into a component 5`] = `
 import Svg from 'react-native-svg';
 const Test = ({ svgRef, title }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;
 
 exports[`reactNativeTemplate should wrap code into a component 6`] = `
@@ -71,5 +75,7 @@ exports[`reactNativeTemplate should wrap code into a component 7`] = `
 import Svg from 'react-native-svg';
 const Test = ({ svgRef, ...props }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;

packages/core/src/templates/reactNativeTemplate.js

@@ -1,4 +1,4 @@
-import { getProps } from './util'
+import { getProps, getForwardRef, getExportName } from './util'
 
 const getComponents = components => {
   if (!components.size) return ''
@@ -30,7 +30,8 @@ const reactNativeTemplate = (code, config, state) => {
   result += `import Svg${components} from 'react-native-svg';\n`
   result += warnLog
   result += `const ${state.componentName} = ${props} => ${code}\n\n`
-  result += `export default ${state.componentName}`
+  result += getForwardRef(config, state)
+  result += `export default ${getExportName(config, state)}`
 
   return result
 }

packages/core/src/templates/util.js

@@ -10,21 +10,24 @@ export const getProps = config => {
   return `({ ${props.join(', ')} })`
 }
 
+export const getExportName = (config, state) =>
+  config.ref ? 'ForwardRef' : state.componentName
+
 export const getExport = (config, state) => {
-  const component = config.ref ? 'ForwardRef' : state.componentName
+  const exportName = getExportName(config, state)
   if (state.webpack && state.webpack.previousExport) {
     let result = ''
     result += `export default ${state.webpack.previousExport}\n`
-    result += `export { ${component} as ReactComponent }`
+    result += `export { ${exportName} as ReactComponent }`
     return result
   }
   if (state.rollup && state.rollup.previousExport) {
     let result = ''
     result += `${state.rollup.previousExport}\n`
-    result += `export { ${component} as ReactComponent }`
+    result += `export { ${exportName} as ReactComponent }`
     return result
   }
-  return `export default ${component}`
+  return `export default ${exportName}`
 }
 
 export const getForwardRef = (config, state) => {