Refactoring to allow strings and functions into the refs, but removed…

… them from the docs and suggested alternative way to use them, exposing less of the internals to the outside

docs/API/forms.md

@@ -19,11 +19,13 @@ import { FormLabel, FormInput } from 'react-native-elements'
 | ---- | ---- | ----| ---- |
 | containerStyle | none | object (style) | TextInput container styling (optional) |
 | inputStyle | none | object (style) | TextInput styling (optional) |
-| textInputRef | none | ref | get ref of TextInput |
-| containerRef | none | ref | get ref of TextInput container |
-| focus | none | function | call focus on the textinput(optional), eg `this.refs.someInputRef.focus()` |
-| blur | none | function | call blur on the textinput(optional), eg `this.refs.someInputRef.blur()` |
-| clearText | none | function | call clear on the textinput(optional), eg `this.refs.someInputRef.clearText()` |
+
+##### Interaction methods
+| method | description |
+| ---- | ---- |
+| focus | call focus on the textinput ([example](#calling)) |
+| blur | call blur on the textinput ([example](#calling)) |
+| clearText | call clear on the textinput ([example](#calling))|
 
 #### FormLabel props
 
@@ -41,18 +43,18 @@ import { FormLabel, FormInput } from 'react-native-elements'
 | labelStyle | none | object (style) | additional label styling (optional) |
 | fontFamily | System font bold (iOS), Sans Serif Bold (android) | string | specify different font family |
 
-#### Using FormInput refs
-
+#### <a name="calling"></a> Calling methods on FormInput
+Store a reference to the FormInput in your component by using the ref prop provided by React ([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
 ```js
 <FormInput
-  ref='forminput'
-  textInputRef='email'
+  ref={input => this.input = input}
   ...
 />
 ```
-You should be able to access the refs like this
+You can then access FormInput methods like so:
 
 ```
-this.refs.forminput.refs.email
-
+this.input.focus();
+this.input.blur();
+this.input.clearText();
 ```

docs/API/searchbar.md

@@ -36,8 +36,6 @@ import { SearchBar } from 'react-native-elements'
 | noIcon | false | boolean | remove icon from textinput |
 | lightTheme | false | boolean | change theme to light theme |
 | round | false | boolean | change TextInput styling to rounded corners |
-| containerRef | none | ref | ref for TextInput conainer |
-| textInputRef | none | ref | ref for TextInput |
 | underlineColorAndroid | transparent | string (color) | specify other than the default transparent underline color |
 | loadingIcon | { color: '#86939e' } | object {color (string), style (object)} | specify color, styling of the loading ActivityIndicator effect |
 | showLoadingIcon | false | boolean | show the loading ActivityIndicator effect |
@@ -46,6 +44,26 @@ import { SearchBar } from 'react-native-elements'
 | onChangeText | none | function | method to fire when text is changed |
 | clearIcon | { color: '#86939e', name: 'search' } | object {name (string), color (string), style (object)} | specify color, styling, or another [Material Icon Name](https://design.google.com/icons/) (Note: pressing on this icon clears text inside the searchbar) |
 
-| focus | none | function | call focus on the textinput(optional), eg `this.refs.someInputRef.focus()` |
-| blur | none | function | call blur on the textinput(optional), eg `this.refs.someInputRef.blur()` |
-| clearText | none | function | call clear on the textinput(optional), eg `this.refs.someInputRef.clearText()` |
+##### Interaction methods
+| method | description |
+| ---- | ---- |
+| focus | call focus on the textinput ([example](#calling)) |
+| blur | call blur on the textinput ([example](#calling)) |
+| clearText | call clear on the textinput ([example](#calling))|
+
+
+#### <a name="calling"></a> Calling methods on SearchBar
+Store a reference to the SearchBar in your component by using the ref prop provided by React ([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+```js
+<SearchBar
+  ref={search => this.search = search}
+  ...
+/>
+```
+You can then access SearchBar methods like so:
+
+```
+this.search.focus();
+this.search.blur();
+this.search.clearText();
+```

src/form/FormInput.js

@@ -15,9 +15,22 @@ const { width } = Dimensions.get('window');
 
 class FormInput extends Component {
   getRef = () => {
-    return this.props.textInputRef
-      ? this.refs[this.props.textInputRef]
-      : this.input;
+    return this.input || this.refs[this.props.textInputRef];
+  };
+
+  getRefHandler = () => {
+    if (this.props.textInputRef) {
+      if (typeof this.props.textInputRef === 'function') {
+        return input => {
+          this.input = input;
+          this.props.textInputRef(input);
+        };
+      } else {
+        return this.props.textInputRef;
+      }
+    } else {
+      return input => this.input = input;
+    }
   };
 
   focus() {
@@ -36,7 +49,6 @@ class FormInput extends Component {
     const {
       containerStyle,
       inputStyle,
-      textInputRef,
       containerRef,
       selectionColor,
       ...attributes
@@ -47,7 +59,7 @@ class FormInput extends Component {
         style={[styles.container, containerStyle && containerStyle]}
       >
         <TextInput
-          ref={textInputRef || (input => this.input = input)}
+          ref={this.getRefHandler()}
           selectionColor={selectionColor || colors.grey3}
           style={[styles.input, inputStyle && inputStyle]}
           {...attributes}
@@ -61,8 +73,10 @@ FormInput.propTypes = {
   containerStyle: View.propTypes.style,
   inputStyle: NativeText.propTypes.style,
   selectionColor: PropTypes.string,
-  textInputRef: PropTypes.string,
-  containerRef: PropTypes.string,
+  // Deprecated
+  textInputRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  // Deprecated
+  containerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 };
 
 const styles = StyleSheet.create({

src/input/Search.js

@@ -14,9 +14,22 @@ import normalize from '../helpers/normalizeText';
 
 class Search extends Component {
   getRef = () => {
-    return this.props.textInputRef
-      ? this.refs[this.props.textInputRef]
-      : this.input;
+    return this.input || this.refs[this.props.textInputRef];
+  };
+
+  getRefHandler = () => {
+    if (this.props.textInputRef) {
+      if (typeof this.props.textInputRef === 'function') {
+        return input => {
+          this.input = input;
+          this.props.textInputRef(input);
+        };
+      } else {
+        return this.props.textInputRef;
+      }
+    } else {
+      return input => this.input = input;
+    }
   };
 
   focus() {
@@ -43,7 +56,6 @@ class Search extends Component {
       loadingIcon,
       clearIcon,
       containerRef,
-      textInputRef,
       selectionColor,
       underlineColorAndroid,
       ...attributes
@@ -58,7 +70,7 @@ class Search extends Component {
         ]}
       >
         <TextInput
-          ref={textInputRef || (input => this.input = input)}
+          ref={this.getRefHandler()}
           selectionColor={selectionColor || colors.grey3}
           underlineColorAndroid={
             underlineColorAndroid ? underlineColorAndroid : 'transparent'
@@ -107,8 +119,10 @@ Search.propTypes = {
   showLoadingIcon: PropTypes.bool,
   loadingIcon: PropTypes.object,
   clearIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-  textInputRef: PropTypes.string,
-  containerRef: PropTypes.string,
+  // Deprecated
+  textInputRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  // Deprecated
+  containerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   selectionColor: PropTypes.string,
   underlineColorAndroid: PropTypes.string,
 };