#13 made Text Input and Text Area the same sizes as in Figma

src/components/SearchInput.jsx

@@ -3,68 +3,161 @@ import PropTypes from 'prop-types'
 import {
   ViewPropTypes,
   StyleSheet,
-  Text,
+  Animated,
   View,
   TouchableOpacity,
+  Easing,
 } from 'react-native'
 
-import TextInput from './TextInput'
+import TextInput from "./TextInput";
 
 // Theme
 import theme from '../theme'
 
 const { colors } = theme
 
+const SEARCH_SHRINK_WIDTH = 375 - 65;
+
 const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    flexWrap: 'wrap',
+    justifyContent: 'center',
+    
+  },
+  searchInputContainer: {
+    backgroundColor: colors.main.lightGrey.rgb,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 8,
-    marginVertical: 16,
-    marginHorizontal: 16,
-    height: 36,
   },
   search: {
-    flex: 1,
-    paddingLeft: 8,
     backgroundColor: colors.main.lightGrey.rgb,
-    fontWeight: '400',
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+  },
+  searchIcon: {
+    marginRight: 4,
+    height: 24,
+    width: 24,
+  },
+  cancelSearch: {
+    flex: 1,
+    position: "absolute",
+    marginHorizontal: 16,
+    textAlign: "center",
+    justifyContent: "center",
+    alignSelf: "center"
+  },
+  cancelSearchText: {
+    flex: 1,
+    backgroundColor: colors.main.white.rgb,
+    color: colors.main.accentBlue.rgb,
+    marginLeft: 16,
+    fontFamily: "Inter",
     fontSize: 15,
     lineHeight: '140%',
-    marginVertical: 10,
+    textAlign: "center",
+  },
+  closeIcon: {
+    height: 16,
+    width: 16,
+    marginRight: 30
   },
 })
 
 class SearchInput extends TextInput {
+  constructor(props) {
+    super(props);
+    
+    this.state = {
+      inputLength: new Animated.Value(410),
+      cancelPosition: new Animated.Value(0),
+      opacity: new Animated.Value(0),
+      searchBarFocused: false,
+    };
+  }
+
+  onFocus = () => {
+    Animated.parallel([
+      Animated.timing(this.state.inputLength, {
+        toValue: SEARCH_SHRINK_WIDTH,
+        duration: 350,
+        easing: Easing.quad,
+      }),
+      Animated.timing(this.state.cancelPosition, {
+        toValue: 16,
+        duration: 350
+      }),
+      Animated.timing(this.state.opacity, {
+        toValue: 1,
+        duration: 350
+      })
+    ]).start();
+  }
+
+  onBlur = () => {
+    Animated.parallel([
+      Animated.timing(this.state.inputLength, {
+        toValue: 410,
+        duration: 350,
+        easing: Easing.quad
+      }),
+      Animated.timing(this.state.cancelPosition, {
+        toValue: 0,
+        duration: 350
+      }),
+      Animated.timing(this.state.opacity, {
+        toValue: 0,
+        duration: 350
+      })
+    ]).start();
+    
+  };
+
   render() {
-    const { text } = this.props
+    const { text, } = this.props
 
     return (
-      <View>
-        <View style={[styles.searchContainer]}>
-          <img src="/icons/main/search.svg" />
-          <TouchableOpacity
-            activeOpacity={0.6}
-            onPress={() => console.log('Pressed')}
-          >
+      <View style={[styles.searchContainer, ]}> 
+      <Animated.Image source={require('../../public/icons/main/search.svg')}style={[styles.searchIcon]}/>
+        <View styles={[styles.searchInputContainer]}>
+          <Animated.View style={[{width: this.state.inputLength,}]}>
             <TextInput
               style={[styles.search]}
               {...this.props}
               placeholderTextColor={'gray'}
               autoCapitalize={'none'}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
               value={text}
+              labelishidden={true}
             />
-          </TouchableOpacity>
+          </Animated.View>
+        
         </View>
+        
+        <View style={[styles.closeIcon,{width: 16, height: 16}]}>
+
+        <Animated.Image source={require('../../public/icons/main/close.svg')}style={[styles.closeIcon, {opacity: this.state.opacity}]}/>
+        </View>
+        <TouchableOpacity styles={[styles.cancelSearch, { marginLeft: 16, right: this.state.cancelPosition}]}>
+          <Animated.Text style={[styles.cancelSearchText, {opacity: this.state.opacity}]}>
+            Cancel
+          </Animated.Text>
+        </TouchableOpacity>
       </View>
     )
   }
 }
 
 SearchInput.propTypes = {
-  text: PropTypes.string,
+  text: PropTypes.string
 }
 
 export default SearchInput

src/components/TextInput.jsx

@@ -17,35 +17,49 @@ const { colors } = theme
 
 const styles = StyleSheet.create({
   label: {
-    fontSize: 14,
+    position: 'relative',
+    alignItems: 'center',
+    display: 'flex',
     fontFamily: 'Inter UI',
-    paddingBottom: 8,
+    fontSize: 15,
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    width: 343,
+    top: 12,
+    height: 26,
+    
   },
   inputContainer: {
-    paddingTop: 8,
-    padding: 16,
+    flex: 1,
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputTouch: {
+    alignItems: 'center',
+    flexDirection: 'column',
     backgroundColor: colors.main.white.rgb,
-    marginVertical: 16,
-    marginHorizontal: 16,
-    borderRadius: 8,
   },
   input: {
-    padding: 0,
+    position: 'relative',
     backgroundColor: colors.main.lightGrey.rgb,
+    borderRadius: 8,
+    marginHorizontal: 16,
+    marginVertical: 16,
     minHeight: 52,
     overflowY: 'auto',
     width: 343,
+    height: 52,
   },
   // error: {
   //   color: colors.main.red.rgb,
   // },
   text: {
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontSize: 15,
     fontFamily: 'Inter UI',
+    fontSize: 15,
+    fontStyle: 'normal',
+    fontWeight: 'normal',
     lineHeight: 22,
+    padding: 16,
   },
 })
 
@@ -58,51 +72,76 @@ class TextInput extends React.Component {
   }
 
   render() {
-    const { label, error, text, multiLine, autoFocus } = this.props
+    const { container, autoFocus, error, labeltext, labelishidden, text, textarea } = this.props
     
-    return (
-      <View>
-        <View style={[styles.inputContainer]}>
-          <Text style={[styles.label, error && styles.error]}>
-            {label}
-          </Text>
+    function renderLabel() {
+      if(labelishidden == true) {
+        return null;
+      } else {
+        return <Text style={[styles.label, error && styles.error]}>{labeltext}</Text>
+      }
+    }
+    if(textarea == true) {
+      return (
+        <View style={[container && styles.inputContainer]}>
           <TouchableOpacity
             activeOpacity={0.6}
-            onPress={() => console.log('Pressed')}
-          >
+            style={[styles.inputTouch]}>  
+            <View>{renderLabel()}</View>
             <TextInputComponent
               {...this.props}
               onContentSizeChange={(event) => {
-                if(this.state.height <= 160) {
+                if(this.state.height <= 202) {
                   this.setState({height: event.nativeEvent.contentSize.height})
                 }
               }}
-              placeholderTextColor={'gray'}
-              multiline={multiLine}
-              style={[styles.input, styles.text, {minHeight: Math.max(52, this.state.height)}]}
-              autoFocus={autoFocus}
               autoCapitalize={'none'}
+              autoFocus={autoFocus}
+              multiline={true}
+              placeholderTextColor={'gray'}
+              style={[styles.input, styles.text, {minHeight: Math.max(95, this.state.height)}]}
               value={text}
             />
-          </TouchableOpacity>
-        </View>
-      </View>
-    )
+            </TouchableOpacity>
+          </View>
+      
+      )
+    } else {
+      return (
+        <View style={[container && styles.inputContainer]}>
+          <TouchableOpacity
+            activeOpacity={0.6}
+            style={[styles.inputTouch]}>  
+            <View>{renderLabel()}</View>
+            <TextInputComponent
+              {...this.props}
+              autoCapitalize={'none'}
+              autoFocus={autoFocus}
+              multiline={false}
+              placeholderTextColor={'gray'}
+              style={[styles.input, styles.text, {minHeight: 32}]}
+              value={text}
+            />
+            </TouchableOpacity>
+          </View>
+      
+      )
+    }
   }
 }
 
 TextInput.propTypes = {
-  label: PropTypes.string,
-  error: PropTypes.bool,
-  text: PropTypes.string,
-  maxNumOfLines: PropTypes.number,
-  multiLine: PropTypes.bool,
   autoFocus: PropTypes.bool,
+  error: PropTypes.bool,
+  labeltext: PropTypes.string,
+  labelishidden: PropTypes.bool,
+  maxNumOfLines: PropTypes.number,
+  text: PropTypes.string,
 }
 
 TextInput.defaultTypes = {
-  multiLine: false,
-  autoFocus: true,
+  autoFocus: false,
+  labelishidden: false,
 }
 
 export default TextInput

src/stories/index.js

@@ -7,7 +7,7 @@ import 'typeface-roboto'
 
 // Components
 import Button from '../components/Button'
-import TextInput from '../components/TextInput'
+import TextInput from "../components/TextInput"
 import SearchInput from '../components/SearchInput'
 
 // Style Guide
@@ -37,30 +37,23 @@ storiesOf('Theming', module)
 storiesOf('TextInput', module)
   .add('Text Input', () => (
     <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
-      <TextInput placeholder={'Placeholder'} />
-      <TextInput text={'Content'} />
-      <TextInput
-        label="Input label"
-        text={'Lorem ipsum dolor sit amet, consectetur do'}
-      />
+      <TextInput placeholder={'Placeholder'} 
+      labeltext={'Input label'}
+      labelishidden={false}/>
     </View>
   ))
   .add('Text Area', () => (
     <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
-      <TextInput placeholder={'Placeholder'} 
-        multiLine={true}
-        autoFocus={false}/>
-      <TextInput
-        label="Textarea label"
-        multiLine={true}
+      <TextInput placeholder={'Placeholder'}
         autoFocus={false}
-        placeholder={'Placeholder'}
+        labeltext={'Textarea label'}
+        labelishidden={false}
+        textarea={true}
       />
     </View>
   ))
   .add('Search Input', () => (
     <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
-      <SearchInput placeholder={'Search placeholder...'} autoFocus={true} />
       <SearchInput placeholder={'Search placeholder...'} />
     </View>
   ))