feat(gifs/native): created GifsMenuFooter

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

@@ -1,7 +1,6 @@
 import { GiphyContent, GiphyGridView, GiphyMediaType } from '@giphy/react-native-sdk';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Image, Text, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { createGifSentEvent, sendAnalytics } from '../../../analytics';
@@ -10,7 +9,7 @@ import { sendMessage } from '../../../chat/actions.any';
 import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import ClearableInput from '../../../participants-pane/components/native/ClearableInput';
 import { formatGifUrlMessage, getGifUrl } from '../../functions';
-
+import GifsMenuFooter from './GifsMenuFooter';
 import styles from './styles';
 
 const GifsMenu = () => {
@@ -34,19 +33,9 @@ const GifsMenu = () => {
         goBack();
     }, []);
 
-
-    const footerComponent = () => (
-        <View style = { styles.credit }>
-            <Text
-                style = { styles.creditText }>Powered by</Text>
-            <Image source = { require('../../../../../images/GIPHY_logo.png') } />
-        </View>
-    );
-
     return (
         <JitsiScreen
-            /* eslint-disable-next-line react/jsx-no-bind */
+            footerComponent = { GifsMenuFooter }
-            footerComponent = { footerComponent }
             style = { styles.container }>
             <ClearableInput
                 customStyles = { styles.clearableInput }

react/features/gifs/components/native/GifsMenuFooter.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, Text, View } from 'react-native';
+
+import styles from './styles';
+
+const GifsMenuFooter = (): JSX.Element => {
+    const { t } = useTranslation();
+
+    return(
+        <View style={ styles.credit }>
+            <Text
+                style={ styles.creditText }>{ t('poweredby') }</Text>
+            <Image
+                source = { require('../../../../../images/GIPHY_logo.png') } />
+        </View>
+    )
+};
+
+export default GifsMenuFooter

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

@@ -12,7 +12,9 @@ export default {
             marginTop: BaseTheme.spacing[3]
         },
 
-        input: { textAlign: 'left' }
+        input: {
+            textAlign: 'left'
+        }
     },
 
     grid: {
@@ -34,7 +36,7 @@ export default {
     },
 
     creditText: {
-        color: 'white',
+        color: BaseTheme.palette.text01,
         fontWeight: 'bold'
     }
 };