added refs to TextInputs issue react-native-elements#42 issue react-n…

…ative-elements#39
flyingcircle · Sep 22, 2016 · e69f422 · e69f422
1 parent 1b39c0c
commit e69f422
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 87 deletions.
diff --git a/Readme.MD b/Readme.MD
@@ -533,6 +533,8 @@ 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 |
 
 
 ## Cross Platform Tab Bar
@@ -735,6 +737,8 @@ 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 | tet ref of TextInput |
+| containerRef | none | ref | get ref of TextInput container |
 
 #### FormLabel props
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "repository": {

diff --git a/src/form/FormInput.js b/src/form/FormInput.js
@@ -1,92 +1,99 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { TextInput, StyleSheet, View, Platform } from 'react-native'
 import colors from '../config/colors'
 
 let styles = {}
 
-const FormInput = ({
-  containerStyle,
-  inputStyle,
-  value,
-  autoCapitalize,
-  autoCorrect,
-  autoFocus,
-  blurOnSubmit,
-  defaultValue,
-  editable,
-  keyboardType,
-  maxLength,
-  multiline,
-  onBlur,
-  onChange,
-  onChangeText,
-  onContentSizeChange,
-  onEndEditing,
-  onFocus,
-  onLayout,
-  onSelectionChange,
-  onSubmitEditing,
-  placeholder,
-  placeholderTextColor,
-  returnKeyType,
-  secureTextEntry,
-  selectTextOnFocus,
-  selectionColor,
-  inlineImageLeft,
-  inlineImagePadding,
-  numberOfLines,
-  returnKeyLabel,
-  underlineColorAndroid,
-  clearButtonMode,
-  clearTextOnFocus,
-  dataDetectorTypes,
-  enablesReturnKeyAutomatically,
-  keyboardAppearance,
-  onKeyPress,
-  selectionState
-}) => (
-  <View style={[styles.container, containerStyle && containerStyle]}>
-    <TextInput
-      autoCapitalize={autoCapitalize}
-      autoCorrect={autoCorrect}
-      autoFocus={autoFocus}
-      blurOnSubmit={blurOnSubmit}
-      defaultValue={defaultValue}
-      keyboardType={keyboardType}
-      maxLength={maxLength}
-      multiline={multiline}
-      onBlur={onBlur}
-      onChange={onChange}
-      onChangeText={onChangeText}
-      onContentSizeChange={onContentSizeChange}
-      onEndEditing={onEndEditing}
-      onFocus={onFocus}
-      onLayout={onLayout}
-      onSelectionChange={onSelectionChange}
-      onSubmitEditing={onSubmitEditing}
-      placeholder={placeholder}
-      placeholderTextColor={placeholderTextColor}
-      returnKeyType={returnKeyType}
-      secureTextEntry={secureTextEntry}
-      selectTextOnFocus={selectTextOnFocus}
-      inlineImageLeft={inlineImageLeft}
-      inlineImagePadding={inlineImagePadding}
-      numberOfLines={numberOfLines}
-      returnKeyLabel={returnKeyLabel}
-      underlineColorAndroid={underlineColorAndroid}
-      clearButtonMode={clearButtonMode}
-      clearTextOnFocus={clearTextOnFocus}
-      dataDetectorTypes={dataDetectorTypes}
-      enablesReturnKeyAutomatically={enablesReturnKeyAutomatically}
-      keyboardAppearance={keyboardAppearance}
-      onKeyPress={onKeyPress}
-      selectionState={selectionState}
-      editable={editable}
-      selectionColor={selectionColor || colors.grey3}
-      value={value}
-      style={[styles.input, inputStyle && inputStyle]} />
-  </View>
-)
+class FormInput extends Component {
+  render () {
+  const {
+    containerStyle,
+    inputStyle,
+    value,
+    autoCapitalize,
+    autoCorrect,
+    autoFocus,
+    blurOnSubmit,
+    defaultValue,
+    editable,
+    keyboardType,
+    maxLength,
+    multiline,
+    onBlur,
+    onChange,
+    onChangeText,
+    onContentSizeChange,
+    onEndEditing,
+    onFocus,
+    onLayout,
+    onSelectionChange,
+    onSubmitEditing,
+    placeholder,
+    placeholderTextColor,
+    returnKeyType,
+    secureTextEntry,
+    selectTextOnFocus,
+    selectionColor,
+    inlineImageLeft,
+    inlineImagePadding,
+    numberOfLines,
+    returnKeyLabel,
+    underlineColorAndroid,
+    clearButtonMode,
+    clearTextOnFocus,
+    dataDetectorTypes,
+    enablesReturnKeyAutomatically,
+    keyboardAppearance,
+    onKeyPress,
+    selectionState,
+    textInputRef,
+    containerRef
+  } = this.props
+  return (
+    <View ref={containerRef} style={[styles.container, containerStyle && containerStyle]}>
+      <TextInput
+        ref={textInputRef}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={autoCorrect}
+        autoFocus={autoFocus}
+        blurOnSubmit={blurOnSubmit}
+        defaultValue={defaultValue}
+        keyboardType={keyboardType}
+        maxLength={maxLength}
+        multiline={multiline}
+        onBlur={onBlur}
+        onChange={onChange}
+        onChangeText={onChangeText}
+        onContentSizeChange={onContentSizeChange}
+        onEndEditing={onEndEditing}
+        onFocus={onFocus}
+        onLayout={onLayout}
+        onSelectionChange={onSelectionChange}
+        onSubmitEditing={onSubmitEditing}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderTextColor}
+        returnKeyType={returnKeyType}
+        secureTextEntry={secureTextEntry}
+        selectTextOnFocus={selectTextOnFocus}
+        inlineImageLeft={inlineImageLeft}
+        inlineImagePadding={inlineImagePadding}
+        numberOfLines={numberOfLines}
+        returnKeyLabel={returnKeyLabel}
+        underlineColorAndroid={underlineColorAndroid}
+        clearButtonMode={clearButtonMode}
+        clearTextOnFocus={clearTextOnFocus}
+        dataDetectorTypes={dataDetectorTypes}
+        enablesReturnKeyAutomatically={enablesReturnKeyAutomatically}
+        keyboardAppearance={keyboardAppearance}
+        onKeyPress={onKeyPress}
+        selectionState={selectionState}
+        editable={editable}
+        selectionColor={selectionColor || colors.grey3}
+        value={value}
+        style={[styles.input, inputStyle && inputStyle]} />
+    </View>)
+  }
+}
 
 styles = StyleSheet.create({
   container: {

diff --git a/src/input/Search.js b/src/input/Search.js
@@ -49,15 +49,20 @@ const Search = ({
   onKeyPress,
   selectionState,
   isFocused,
-  clear
+  clear,
+  textInputRef,
+  containerRef
 }) => {
   return (
-    <View style={[
+    <View
+      ref={containerRef}
+      style={[
       styles.container,
       lightTheme && styles.containerLight,
       containerStyle && containerStyle
     ]}>
       <TextInput
+        ref={textInputRef}
         autoCapitalize={autoCapitalize}
         autoCorrect={autoCorrect}
         autoFocus={autoFocus}