Support animations

Author: amoreno

lib/MaterialSearchBar.js

@@ -13,12 +13,14 @@ import {
 type Props = {
   containerStyle: Object | number,
   styleInput: Object | number,
-  searchIcon: Node,
-  closeIcon: Node,
+  searchIcon: Object,
+  closeIcon: Object,
   onChangeText: Function
 }
 type State = {
-  isEmpty: boolean
+  isEmpty: boolean,
+  scale: number,
+  value: string
 }
 
 class MaterialSearchBar extends React.Component<Props, State> {
@@ -28,23 +30,49 @@ class MaterialSearchBar extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
-      isEmpty: true
+      isEmpty: true,
+      scale: new Animated.Value(1),
+      value: ''
     }
   }
 
   _onPressButton = () => {
-    this._textInput.clear()
-    this.setState({ isEmpty: true }, () => {
+    this.setState({ isEmpty: true, value: '' }, () => {
       this.props.onChangeText('')
     })
   }
 
+  doAnimation = () => {
+    Animated.sequence([
+      Animated.timing(this.state.scale, {
+        toValue: 1.2,
+        duration: 100,
+        useNativeDriver: true
+      }),
+      Animated.timing(this.state.scale, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true
+      })
+    ]).start()
+  }
+
   _onChangeText = (value: string) => {
     this.props.onChangeText(value)
     if (value) {
-      this.setState({ isEmpty: false })
+      this.setState({ isEmpty: false, value })
     } else {
-      this.setState({ isEmpty: true })
+      this.setState({ isEmpty: true, value })
+    }
+
+    if (this.state.value.length === 0) {
+      this.doAnimation()
+    }
+  }
+
+  componentWillUpdate(nextProps: Props, nextState: State) {
+    if (nextState.value.length === 0) {
+      this.doAnimation()
     }
   }
 
@@ -54,32 +82,34 @@ class MaterialSearchBar extends React.Component<Props, State> {
       console.warn('MaterialSearchBar is only available on Android.')
       return null
     }
-    const isLowAPI: boolean = Platform.Version < 21
     return (
       <View style={this.props.containerStyle}>
         <TextInput
           {...this.props}
           ref={(ref: any) => {
             this._textInput = ref
           }}
+          value={this.state.value}
           style={this.props.styleInput}
           onChangeText={this._onChangeText}
         />
         <TouchableNativeFeedback
           onPress={this._onPressButton}
           background={
-            isLowAPI
+            Platform.Version < 21
               ? TouchableNativeFeedback.SelectableBackground()
               : TouchableNativeFeedback.SelectableBackgroundBorderless()
           }>
           <Animated.View
-          // style={{
-          //   transform: [
-          //     { scale: this.state.scale },
-          //     { perspective: 1000 } // without this line this Animation will not render on Android while working fine on iOS
-          //   ]
-          // }}
-          >
+            style={[
+              {
+                transform: [
+                  {
+                    scale: this.state.scale
+                  }
+                ]
+              }
+            ]}>
             {isEmpty ? this.props.searchIcon : this.props.closeIcon}
           </Animated.View>
         </TouchableNativeFeedback>
@@ -110,8 +140,8 @@ MaterialSearchBar.propTypes = {
   /** Override the inline-styles of the root element. */
   containerStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   styleInput: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-  searchIcon: PropTypes.node,
-  closeIcon: PropTypes.node,
+  searchIcon: PropTypes.element,
+  closeIcon: PropTypes.element,
   onChangeText: PropTypes.func.isRequired
 }