From 4bdd9898e9b5916eb02a2223574986d7ddfea0a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 1 Oct 2018 09:33:11 +0200
Subject: [PATCH] feat: use forwardRef on React Native

See #184
---
 packages/cli/src/__snapshots__/index.test.js.snap    |  6 +++++-
 packages/core/src/__snapshots__/convert.test.js.snap |  6 +++++-
 .../__snapshots__/reactNativeTemplate.test.js.snap   | 12 +++++++++---
 packages/core/src/templates/reactNativeTemplate.js   |  5 +++--
 packages/core/src/templates/util.js                  | 11 +++++++----
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
index 173e7354..c5615267 100644
--- a/packages/cli/src/__snapshots__/index.test.js.snap
+++ b/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
 
 "
 `;
diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap
index e7a9675f..61c2948f 100644
--- a/packages/core/src/__snapshots__/convert.test.js.snap
+++ b/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
 "
 `;
 
diff --git a/packages/core/src/templates/__snapshots__/reactNativeTemplate.test.js.snap b/packages/core/src/templates/__snapshots__/reactNativeTemplate.test.js.snap
index 5aa39b18..eb0a3a2c 100644
--- a/packages/core/src/templates/__snapshots__/reactNativeTemplate.test.js.snap
+++ b/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"
 `;
diff --git a/packages/core/src/templates/reactNativeTemplate.js b/packages/core/src/templates/reactNativeTemplate.js
index 239f3167..8b8ed800 100644
--- a/packages/core/src/templates/reactNativeTemplate.js
+++ b/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
 }
diff --git a/packages/core/src/templates/util.js b/packages/core/src/templates/util.js
index cbd7c1b5..b7ef810a 100644
--- a/packages/core/src/templates/util.js
+++ b/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) => {