chore: animate giphy chip

Author: isekovanic

package/src/components/MessageInput/MessageInput.tsx

@@ -418,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                     <>
                       <MessageInputLeadingView />
 
-                      <AutoCompleteInput
-                        TextInputComponent={TextInputComponent}
-                        {...additionalTextInputProps}
-                      />
+                      <Animated.View layout={LinearTransition.duration(200)}>
+                        <AutoCompleteInput
+                          TextInputComponent={TextInputComponent}
+                          {...additionalTextInputProps}
+                        />
+                      </Animated.View>
                     </>
                   )}
 

package/src/components/MessageInput/MessageInputLeadingView.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { AttachmentManagerState } from 'stream-chat';
 
@@ -31,9 +33,13 @@ export const MessageInputLeadingView = () => {
   }, [textComposer, hasAttachments]);
 
   return command && !hasAttachments ? (
-    <View style={styles.giphyContainer}>
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      style={styles.giphyContainer}
+    >
       <GiphyChip />
-    </View>
+    </Animated.View>
   ) : null;
 };