1 files changed, 48 insertions, 19 deletions

diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
index 6d2a2f2e..790fea0a 100644
--- a/src/screens/badge/BadgeItem.tsx
+++ b/src/screens/badge/BadgeItem.tsx
@@ -1,33 +1,46 @@
 import React from 'react';
-import {View, Text, StyleSheet, Image} from 'react-native';
+import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
 import {Background} from '../../components';
 import {SCREEN_WIDTH, normalize} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
 import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface BadgeItemProps {
-  title: String;
-  resourcePath: String;
+  title: string;
+  resourcePath: ImageSourcePropType;
   index: Number;
+  selected: boolean;
+  onSelection: (ikey: string) => void;
+  itemKey: string;
 }
 
-const BadgeItem: React.FC<BadgeItemProps> = ({title, index}) => {
+const BadgeItem: React.FC<BadgeItemProps> = ({
+  title,
+  resourcePath,
+  selected,
+  index,
+  onSelection,
+  itemKey,
+}) => {
   return (
-    <LinearGradient
-      colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
-      useAngle={true}
-      angle={136.69}
-      style={styles.item}>
-      <View style={styles.detailContainer}>
-        <Image
-          source={require('../../assets/images/football.png')}
-          style={styles.imageStyles}
-        />
-        <View style={styles.textContainer}>
-          <Text style={styles.title}>{title}</Text>
+    <TouchableOpacity onPress={() => onSelection(itemKey)}>
+      <LinearGradient
+        colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+        useAngle={true}
+        angle={136.69}
+        style={styles.item}>
+        <View
+          style={
+            selected ? styles.selectedDetailContainer : styles.detailContainer
+          }>
+          <Image source={resourcePath} style={styles.imageStyles} />
+          <View style={styles.textContainer}>
+            <Text style={styles.title}>{title}</Text>
+          </View>
         </View>
-      </View>
-    </LinearGradient>
+      </LinearGradient>
+    </TouchableOpacity>
   );
 };
 
@@ -39,7 +52,22 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     borderRadius: 8,
   },
-  detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'},
+  detailContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderRadius: 8,
+    borderColor: 'transparent',
+  },
+  selectedDetailContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: 'white',
+    borderRadius: 8,
+  },
   imageStyles: {
     width: '31%',
     height: '31%',
@@ -52,6 +80,7 @@ const styles = StyleSheet.create({
     lineHeight: normalize(17.9),
     textAlign: 'center',
     color: 'white',
+    marginHorizontal: '2%',
   },
 });