From 9bccc8839ba0804a749f246fae9fef16b664fdd4 Mon Sep 17 00:00:00 2001
From: Meyanis95 <yanis.meziane@essec.edu>
Date: Fri, 19 Apr 2024 22:48:39 +0200
Subject: [PATCH] feat: fixed footer

---
 example/src/Components/Footer.tsx | 37 ++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/example/src/Components/Footer.tsx b/example/src/Components/Footer.tsx
index 0467494..53e8ff1 100644
--- a/example/src/Components/Footer.tsx
+++ b/example/src/Components/Footer.tsx
@@ -2,12 +2,15 @@ import React, { type FunctionComponent } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { icons } from './illustrations';
 import { SvgXml } from 'react-native-svg';
+import { useRoute } from '@react-navigation/native';
 
 type FooterProps = {
   navigation: any;
 };
 
 export const Footer: FunctionComponent<FooterProps> = ({ navigation }) => {
+  const route = useRoute();
+
   return (
     <View style={styles.footerContainer}>
       <TouchableOpacity
@@ -15,16 +18,40 @@ export const Footer: FunctionComponent<FooterProps> = ({ navigation }) => {
         onPress={() => navigation.navigate('Home')}
       >
         <View style={styles.iconWrapper}>
-          <SvgXml xml={icons.home5Line} width="30" height="30" />
-          <Text style={styles.footerText}>Home</Text>
+          <SvgXml
+            xml={route.name === 'Home' ? icons.home5LineGreen : icons.home5Line}
+            width="30"
+            height="30"
+          />
+          <Text
+            style={[
+              styles.footerText,
+              route.name === 'Home' ? { color: '#06753B' } : null,
+            ]}
+          >
+            Home
+          </Text>
         </View>
       </TouchableOpacity>
       <TouchableOpacity
         style={styles.footerButton}
         onPress={() => navigation.navigate('About')}
       >
-        <SvgXml xml={icons.rainbowLine} width="30" height="30" />
-        <Text style={styles.footerText}>Resources</Text>
+        <SvgXml
+          xml={
+            route.name === 'About' ? icons.rainbowLineGreen : icons.rainbowLine
+          }
+          width="30"
+          height="30"
+        />
+        <Text
+          style={[
+            styles.footerText,
+            route.name === 'About' ? { color: '#06753B' } : null,
+          ]}
+        >
+          Resources
+        </Text>
       </TouchableOpacity>
     </View>
   );
@@ -48,7 +75,7 @@ const styles = StyleSheet.create({
   footerText: {
     fontFamily: 'Outfit-Regular',
     fontSize: 14,
-    color: 'white',
     marginTop: 4,
+    color: '#71696A',
   },
 });