feat(gifs/native): fixed gify search input

react/features/gifs/components/native/GifsMenu.js

@@ -1,7 +1,7 @@
 import { GiphyContent, GiphyGridView, GiphyMediaType } from '@giphy/react-native-sdk';
 import React, { useCallback, useState } from 'react';
-import { Image, Keyboard, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import { Image, Text, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { createGifSentEvent, sendAnalytics } from '../../../analytics';
@@ -16,7 +16,7 @@ import styles from './styles';
 const GifsMenu = () => {
     const [ searchQuery, setSearchQuery ] = useState('');
     const dispatch = useDispatch();
-    const insets = useSafeAreaInsets();
+    const { t } = useTranslation();
 
     const content = searchQuery === ''
         ? GiphyContent.trending({ mediaType: GiphyMediaType.Gif })
@@ -34,33 +34,32 @@ const GifsMenu = () => {
         goBack();
     }, []);
 
-    const onScroll = useCallback(Keyboard.dismiss, []);
 
-    return (<JitsiScreen
-        style = { styles.container }>
-        <ClearableInput
-            autoFocus = { true }
-            customStyles = { styles.clearableInput }
-            onChange = { setSearchQuery }
-            placeholder = 'Search GIPHY'
-            value = { searchQuery } />
-        <GiphyGridView
-            cellPadding = { 5 }
-            content = { content }
-            onMediaSelect = { sendGif }
-            onScroll = { onScroll }
-            style = { styles.grid } />
-        <View
-            style = { [ styles.credit, {
-                bottom: insets.bottom,
-                left: insets.left,
-                right: insets.right
-            } ] }>
+    const footerComponent = () => (
+        <View style = { styles.credit }>
             <Text
                 style = { styles.creditText }>Powered by</Text>
             <Image source = { require('../../../../../images/GIPHY_logo.png') } />
         </View>
-    </JitsiScreen>);
+    );
+
+    return (
+        <JitsiScreen
+            /* eslint-disable-next-line react/jsx-no-bind */
+            footerComponent = { footerComponent }
+            style = { styles.container }>
+            <ClearableInput
+                customStyles = { styles.clearableInput }
+                onChange = { setSearchQuery }
+                placeholder = { t('giphy.search') }
+                value = { searchQuery } />
+            <GiphyGridView
+                cellPadding = { 5 }
+                content = { content }
+                onMediaSelect = { sendGif }
+                style = { styles.grid } />
+        </JitsiScreen>
+    );
 };
 
 export default GifsMenu;

react/features/gifs/components/native/styles.js

@@ -22,15 +22,15 @@ export default {
     },
 
     credit: {
+        alignItems: 'center',
         backgroundColor: BaseTheme.palette.ui01,
-        width: '100%',
-        height: 40,
-        position: 'absolute',
-        marginBottom: 0,
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center'
+        height: 56,
+        justifyContent: 'center',
+        marginBottom: BaseTheme.spacing[0],
+        paddingBottom: BaseTheme.spacing[4],
+        width: '100%'
     },
 
     creditText: {