added lots of stuff

example/demo1/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

example/demo1/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

example/demo1/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/demo1/App.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+
+import { View, TextInput, StyleSheet, KeyboardAvoidingView } from 'react-native';
+import { Constants } from 'expo';
+
+import Form from './form';
+
+export default class App extends Component {
+  state = {
+    inputValue1: 'You can change me!',
+    inputValue2: 'You can change me!',
+    inputValue3: 'You can change me!',
+  };
+
+  _handleTextChange = i => inputValue => {
+    const x = {};
+    x[`inputValue${i}`] = inputValue;
+    this.setState(x);
+  };
+
+  render() {
+    return (
+      <KeyboardAvoidingView style={styles.container} behavior={'padding'}>
+        <Form style={styles.form}>
+            <TextInput
+              value={this.state.inputValue1}
+              onChangeText={this._handleTextChange(1)}
+              style={{ width: 200, height: 44, padding: 8 }}
+              blurOnSubmit={false}
+            />
+
+            <TextInput
+              value={this.state.inputValue2}
+              onChangeText={this._handleTextChange(2)}
+              style={{ width: 200, height: 44, padding: 8 }}
+              blurOnSubmit={false}
+            />
+
+            <TextInput
+              value={this.state.inputValue3}
+              onChangeText={this._handleTextChange(3)}
+              style={{ width: 200, height: 44, padding: 8 }}
+              onSubmitEditing={ () => { console.log('poooopie'); } }
+            />
+        </Form>
+      </KeyboardAvoidingView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: 'red',
+  },
+  form: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  }
+});

example/demo1/app.json

@@ -0,0 +1,21 @@
+{
+  "expo": {
+    "name": "demo1",
+    "description": "This project is really great.",
+    "slug": "demo1",
+    "privacy": "public",
+    "sdkVersion": "25.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

example/demo1/form.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+
+export default class Form extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputs = [];
+  }
+
+  checkIfInput = element => {
+    const elemName = element.type.name || element.type.displayName;
+    const inputElements = this.props.inputElements ||
+    [
+      {
+        names: ['TextInput'], // names: 'TextInput' or name: 'TextInput' is also okay
+        submitFunctionNames: ['onSubmitEditing'], // submitFunctionNames: 'onSubmitEditing' or submitFunctionName: 'onSubmitEditing' is also okay
+        focus: 'focus',
+      },
+    ];
+    for (let input of inputElements) {
+      let names = [];
+      if (input.names) {
+        names = names.concat(input.names);
+      }
+      if (input.name) {
+        names.push(input.name);
+      }
+      console.log('z', names, elemName);
+      if (names.includes(elemName)) {
+        return input;
+      }
+    }
+    return false;
+  };
+
+  cloneElement = (element, index, inputInfo) => {
+    console.log('cloning');
+    let functionNames = [];
+    if (inputInfo.submitFunctionNames) {
+      functionNames = functionNames.concat(inputInfo.submitFunctionNames);
+    }
+    if (inputInfo.submitFunctionName) {
+      functionNames = functionNames.concat(inputInfo.submitFunctionName);
+    }
+    const handleEnterBuilder = (oldEnter) => (...arg) =>
+      this.inputs[index + 1]
+        ? this.inputs[index + 1][inputInfo['focus']]()
+        : oldEnter(...arg);
+    const submitFunctions = {};
+    for (let func of functionNames) {
+      let oldFunc = element.props[func];
+      submitFunctions[func] = handleEnterBuilder(oldFunc);
+    }
+    const oldRef = element.props.ref;
+    const handleRef = (ref, ...rest) => {
+      this.inputs[index] = ref;
+      if (oldRef) {
+        oldRef(ref, ...rest);
+      }
+    };
+    return React.cloneElement(element, {
+      ...submitFunctions,
+      ref: handleRef,
+    });
+  };
+
+  renderChildren(children, recursiveIndex = 0) {
+    console.log('renderChildren', children.length);
+    return React.Children.map(children, (child, index) => {
+    //return children.map((child, index) => {
+      if (child.props.children)
+        return React.cloneElement(child, {
+          ...child.props,
+          children: this.renderChildren(child.props.children, index)
+        });
+      const childType = this.checkIfInput(child);
+      console.log(childType);
+      if (childType === false) return child;
+      console.log('action');
+      const realIndex = index + recursiveIndex;
+      return this.cloneElement(child, realIndex, childType);
+    });
+  }
+
+  render() {
+    let { children, ...props } = this.props;
+    return (
+      <View {...props}>
+        {this.renderChildren(children)}
+      </View>
+    );
+  }
+}
+

example/demo1/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "dependencies": {
+    "expo": "^25.0.0",
+    "react": "16.2.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz"
+  }
+}

form.js

@@ -2,26 +2,83 @@ import React from 'react';
 import { View } from 'react-native';
 
 export default class Form extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.inputs = [];
   }
 
+  checkIfInput = element => {
+    const elemName = element.type.name || element.type.displayName;
+    const inputElements = this.props.inputElements ||
+      [
+        {
+          names: ['TextInput'], // names: 'TextInput' or name: 'TextInput' is also okay
+          submitFunctionNames: ['onSubmitEditing'], // submitFunctionNames: 'onSubmitEditing' or submitFunctionName: 'onSubmitEditing' is also okay
+          focus: 'focus',
+        },
+      ];
+    for (let input of inputElements) {
+      let names = [];
+      if (input.names) {
+        names = names.concat(input.names);
+      }
+      if (input.name) {
+        names.push(input.name);
+      }
+      console.log('z', names, elemName);
+      if (names.includes(elemName)) {
+        return input;
+      }
+    }
+    return false;
+  };
+
+  cloneElement = (element, index, inputInfo) => {
+    console.log('cloning');
+    let functionNames = [];
+    if (inputInfo.submitFunctionNames) {
+      functionNames = functionNames.concat(inputInfo.submitFunctionNames);
+    }
+    if (inputInfo.submitFunctionName) {
+      functionNames = functionNames.concat(inputInfo.submitFunctionName);
+    }
+    const handleEnterBuilder = (oldEnter) => (...arg) =>
+      this.inputs[index + 1]
+        ? this.inputs[index + 1][inputInfo['focus']]()
+        : oldEnter(...arg);
+    const submitFunctions = {};
+    for (let func of functionNames) {
+      let oldFunc = element.props[func];
+      submitFunctions[func] = handleEnterBuilder(oldFunc);
+    }
+    const oldRef = element.props.ref;
+    const handleRef = (ref, ...rest) => {
+      this.inputs[index] = ref;
+      if (oldRef) {
+        oldRef(ref, ...rest);
+      }
+    };
+    return React.cloneElement(element, {
+      ...submitFunctions,
+      ref: handleRef,
+    });
+  };
+
   renderChildren(children, recursiveIndex = 0) {
+    console.log('renderChildren', children.length);
     return React.Children.map(children, (child, index) => {
+      //return children.map((child, index) => {
       if (child.props.children)
         return React.cloneElement(child, {
-          ...child.props, 
+          ...child.props,
           children: this.renderChildren(child.props.children, index)
         });
-      if (child.type.name !== 'TextInput') return child;
-
-      let realIndex = index + recursiveIndex
-      return React.cloneElement(child, {
-        onEnter: () =>
-          this.inputs[realIndex + 1] ? this.inputs[realIndex + 1].focus() : null,
-        inputRef: ref => (this.inputs[realIndex] = ref),
-      });
+      const childType = this.checkIfInput(child);
+      console.log(childType);
+      if (childType === false) return child;
+      console.log('action');
+      const realIndex = index + recursiveIndex;
+      return this.cloneElement(child, realIndex, childType);
     });
   }
 
@@ -34,3 +91,4 @@ export default class Form extends React.Component {
     );
   }
 }
+

index.js

@@ -1,2 +1,2 @@
 export { default as Form } from './form';
-export { default as TextInput } from './text-input';
+//export { default as TextInput } from './text-input';

package.json

@@ -20,5 +20,9 @@
   "bugs": {
     "url": "https://github.com/zackify/react-native-autofocus/issues"
   },
-  "homepage": "https://github.com/zackify/react-native-autofocus#readme"
+  "homepage": "https://github.com/zackify/react-native-autofocus#readme",
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-native": "^0.54.0"
+  }
 }

text-input.js

@@ -1,6 +1,25 @@
+/*
 import React from 'react';
 import { TextInput as Input } from 'react-native';
 
+export const InputBuilder = (Element, submitFunctionNames) => ({ onEnter, inputRef, ...props }) => {
+  const enterProp = {};
+  const functionNamesArray = [].concat(submitFunctionNames);
+  for (let functionName of functionNamesArray) {
+    enterProp[functionName] = onEnter;
+  }
+  return (
+    <Element
+      ref={ ref => inputRef(ref) }
+      { ...enterProp, ...props }
+    />
+  );
+}
+
+
+const TextInput = InputBuilder(Input);
+
+
 const TextInput = ({ onSubmitEditing, onEnter, inputRef, ...props }) => (
   <Input
     ref={ref => inputRef(ref)}
@@ -13,3 +32,4 @@ const TextInput = ({ onSubmitEditing, onEnter, inputRef, ...props }) => (
 );
 
 export default TextInput;
+*/