Add label for the Input component (#990)

* Add label to Input * Remove `displayError` props * Update the docs * Update typescript def * Remove default in typescript * Fix typo * Update falsy props checking * Add label to Input
react-native-elements · Apr 1, 2018 · 4c99586 · 4c99586
1 parent ae3d62f
commit 4c99586
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git a/docs/input.md b/docs/input.md
@@ -15,7 +15,7 @@ import { Input } from 'react-native-elements';
 
 <Input
   placeholder='INPUT WITH ICON'
-  icon={
+  leftIcon={
     <Icon
       name='user'
       size={24}
@@ -31,7 +31,6 @@ import { Input } from 'react-native-elements';
 
 <Input
   placeholder='INPUT WITH ERROR MESSAGE'
-  displayError={true}
   errorStyle={{ color: 'red' }}
   errorMessage='ENTER A VALID ERROR HERE'
 />
@@ -50,6 +49,7 @@ import { Input } from 'react-native-elements';
 | leftIconContainerStyle  | none    | View style (object)    | styling for left Icon Component container        |
 | inputStyle              | none    | object                 | add styling to input component (optional)        |
 | shake                   | none    | any                    | add shaking effect to input component (optional) |
-| displayError            | none    | bool                   | displays error (optional)                        |
-| errorStyle              | none    | object                 | add styling to error message (optional)          |
-| errorMessage            | none    | string                 | adds error message (optional)                    |
+| label                   | none    | string                 | add a label on top of the input (optional)       |
+| labelStyle              | none    | object                 | styling for the label (optional)         |
+| errorMessage            | none    | string                 | add error message (optional)                     |
+| errorStyle              | none    | object                 | styling for the error message (optional)         |
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -785,22 +785,25 @@ export interface InputProps extends TextInputProperties {
    */
   shake?: any;
 
-  /**
-   *  Displays error (optional)
-   */
-  displayError?: boolean;
-
   /**
    * 	Add styling to error message (optional)
    */
   errorStyle?: StyleProp<TextStyle>;
 
   /**
    * 	Adds error message (optional)
-   * *
-   * @default 'Error!'
    */
   errorMessage?: string;
+
+  /**
+   * 	Add styling to label (optional)
+   */
+  labelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * 	Adds label (optional)
+   */
+  label?: string;
 }
 
 export class Input extends React.Component<InputProps, any> {

diff --git a/src/input/Input.js b/src/input/Input.js
@@ -9,9 +9,12 @@ import {
   Dimensions,
   Animated,
   Easing,
+  Platform,
 } from 'react-native';
 
 import ViewPropTypes from '../config/ViewPropTypes';
+import fonts from '../config/fonts';
+import colors from '../config/colors';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
@@ -57,9 +60,10 @@ class Input extends Component {
       rightIcon,
       rightIconContainerStyle,
       inputStyle,
-      displayError,
       errorStyle,
       errorMessage,
+      labelStyle,
+      label,
       ...attributes
     } = this.props;
     const translateX = this.shakeAnimationValue.interpolate({
@@ -69,6 +73,11 @@ class Input extends Component {
 
     return (
       <View>
+        {label && (
+          <Text style={[styles.label, labelStyle]}>
+            {label}
+          </Text>
+        )}
         <Animated.View
           style={[
             styles.container,
@@ -103,9 +112,9 @@ class Input extends Component {
             </View>
           )}
         </Animated.View>
-        {displayError && (
+        {errorMessage && (
           <Text style={[styles.error, errorStyle && errorStyle]}>
-            {errorMessage || 'Error!'}
+            {errorMessage}
           </Text>
         )}
       </View>
@@ -125,16 +134,18 @@ Input.propTypes = {
   inputStyle: Text.propTypes.style,
 
   shake: PropTypes.any,
-  displayError: PropTypes.bool,
   errorStyle: Text.propTypes.style,
   errorMessage: PropTypes.string,
+
+  label: PropTypes.string,
+  labelStyle: Text.propTypes.style,
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderColor: 'rgba(171, 189, 219, 1)',
+    borderColor: colors.grey3,
     alignItems: 'center',
   },
   iconContainer: {
@@ -147,14 +158,26 @@ const styles = StyleSheet.create({
     color: 'black',
     fontSize: 18,
     marginLeft: 10,
-    width: '100%',
+    flex: 1,
     height: 40,
   },
   error: {
     color: '#FF2D00',
     margin: 5,
     fontSize: 12,
   },
+  label: {
+    color: colors.grey3,
+    fontSize: 16,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold',
+      },
+      android: {
+        ...fonts.android.bold,
+      },
+    }),
+  },
 });
 
 export default Input;