feat: fixed footer

anon-aadhaar · Apr 19, 2024 · 9bccc88 · 9bccc88
1 parent b08fcd9
commit 9bccc88
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/example/src/Components/Footer.tsx b/example/src/Components/Footer.tsx
@@ -2,29 +2,56 @@ 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
         style={styles.footerButton}
         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',
   },
 });