From 5a04dab03691573aeb454cc1ef5974bdd1df060f Mon Sep 17 00:00:00 2001
From: gaboelnuevo <gaboelnuevo@gmail.com>
Date: Tue, 14 Aug 2018 13:58:58 -0300
Subject: [PATCH 1/2] support custom component and inputRef

---
 README.md     | 13 +++++++++++++
 form.js       |  7 ++++++-
 text-input.js | 23 +++++++++++++----------
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index dd0a0b9..bbb5ffb 100644
--- a/README.md
+++ b/README.md
@@ -16,4 +16,17 @@ export default () => (
 )
 ```
 
+You can set your own input component:
+
+```js
+import { Form } from 'react-native-autofocus'
+
+export default () => (
+  <Form>
+    <TextInput component={MyTextInput} placeholder="test" />
+    <TextInput component={MyTextInput} placeholder="test 2" />
+  </Form>
+)
+```
+
 Hit enter inside your first input, and the next field will be focused. The logic is all abstracted for you!
diff --git a/form.js b/form.js
index 73d1033..55db9ce 100644
--- a/form.js
+++ b/form.js
@@ -22,7 +22,12 @@ export default class Form extends React.Component {
       return React.cloneElement(child, {
         onEnter: () =>
           this.inputs[realIndex + 1] ? this.inputs[realIndex + 1].focus() : null,
-        inputRef: ref => (this.inputs[realIndex] = ref),
+        inputRef: ref => {
+          this.inputs[realIndex] = ref;
+          if(child.props.inputRef && child.props.inputRef == "function") {
+            child.props.inputRef(ref);
+          }
+        },
       });
     });
   }
diff --git a/text-input.js b/text-input.js
index 0b60e06..0efa97b 100644
--- a/text-input.js
+++ b/text-input.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import { TextInput as Input } from 'react-native';
 
-const TextInput = ({ onSubmitEditing, onEnter, inputRef, ...props }) => (
-  <Input
-    ref={ref => inputRef(ref)}
-    onSubmitEditing={() => {
-      if (onEnter) onEnter();
-      if (onSubmitEditing) onSubmitEditing();
-    }}
-    {...props}
-  />
-);
+const TextInput = ({ onSubmitEditing, onEnter, inputRef, component=null, ...props }) => {
+  const InputComponent = component || Input;
+  return (
+    <InputComponent
+      ref={ref => inputRef(ref)}
+      onSubmitEditing={() => {
+        if (onEnter) onEnter();
+        if (onSubmitEditing) onSubmitEditing();
+      }}
+      {...props}
+    />
+  );
+};
 
 export default TextInput;

From 20426ac691312ff5f43a66d8190c7db9d5bffc7f Mon Sep 17 00:00:00 2001
From: gaboelnuevo <gaboelnuevo@gmail.com>
Date: Wed, 15 Aug 2018 11:48:28 -0300
Subject: [PATCH 2/2] fix error of one child element React.Children.only?

---
 form.js       | 45 ++++++++++++++++++++++++++++++++-------------
 text-input.js |  4 ++--
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/form.js b/form.js
index 55db9ce..a12e9aa 100644
--- a/form.js
+++ b/form.js
@@ -1,35 +1,54 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import TextInput from "./text-input";
+
 export default class Form extends React.Component {
   constructor() {
     super();
     this.inputs = [];
   }
 
-  renderChildren(children, recursiveIndex = 0) {
-    return React.Children.map(children, (child, index) => {
+  renderChildren(children, recursive=false) {
+    if(!recursive) this.count = 0;
+    let inputTypes = this.props.inputTypes || [ TextInput ];
+    let elements = React.Children.map(children, (child, index) => {
       if(!child)
         return;
-      if (child.props.children)
-        return React.cloneElement(child, {
-          ...child.props, 
-          children: this.renderChildren(child.props.children, index)
-        });
-      if (child.type.name !== 'TextInput') return child;
-      
-      let realIndex = index + recursiveIndex
+  
+      if (!inputTypes.some(input => input === child.type)) {
+        if (child.props && child.props.children) {
+          return React.cloneElement(child, {
+            ...child.props, 
+            children: this.renderChildren(child.props.children, true)
+          });
+        }  
+        return child;
+      }
+
+      const realIndex = this.count;
+      this.count++;
+
       return React.cloneElement(child, {
-        onEnter: () =>
-          this.inputs[realIndex + 1] ? this.inputs[realIndex + 1].focus() : null,
+        onSubmitEditing: () => {
+          if(this.inputs[realIndex + 1] && this.inputs[realIndex + 1].focus) {
+            this.inputs[realIndex + 1].focus();
+          }
+        },
         inputRef: ref => {
           this.inputs[realIndex] = ref;
-          if(child.props.inputRef && child.props.inputRef == "function") {
+          if(child.props.inputRef) {
             child.props.inputRef(ref);
           }
         },
       });
     });
+
+    if(children && !Array.isArray(children) && elements.length == 1) {
+      return elements[0];
+    }
+
+    return elements;
   }
 
   render() {
diff --git a/text-input.js b/text-input.js
index 0efa97b..7a6a0e3 100644
--- a/text-input.js
+++ b/text-input.js
@@ -5,7 +5,7 @@ const TextInput = ({ onSubmitEditing, onEnter, inputRef, component=null, ...prop
   const InputComponent = component || Input;
   return (
     <InputComponent
-      ref={ref => inputRef(ref)}
+      ref={ref => inputRef && inputRef(ref)}
       onSubmitEditing={() => {
         if (onEnter) onEnter();
         if (onSubmitEditing) onSubmitEditing();
@@ -15,4 +15,4 @@ const TextInput = ({ onSubmitEditing, onEnter, inputRef, component=null, ...prop
   );
 };
 
-export default TextInput;
+export default TextInput;
\ No newline at end of file