added gradient style to TaggSquareButton

1 files changed, 29 insertions, 1 deletions

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 4fe61b95..c6064b92 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -7,12 +7,14 @@ import {
   ViewProps,
   ViewStyle,
 } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
-  mode: 'normal' | 'large';
+  mode: 'normal' | 'large' | 'gradient';
   color: 'purple' | 'white';
   style?: ViewStyle;
 }
@@ -36,6 +38,18 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           <Text style={styles.largeLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
+    case 'gradient':
+      return (
+        <TouchableOpacity onPress={props.onPress}>
+          <LinearGradient
+            style={styles.gradientButton}
+            colors={BACKGROUND_GRADIENT_MAP[0]}
+            useAngle
+            angle={90}>
+            <Text style={styles.gradientLabel}>{props.title}</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      );
     case 'normal':
     default:
       return (
@@ -74,6 +88,20 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#78A0EF',
   },
+  gradientButton: {
+    marginTop: '8%',
+    borderRadius: 5,
+    paddingVertical: '5%',
+    aspectRatio: 3.3,
+    elevation: 2,
+    backgroundColor: '#2196F3',
+  },
+  gradientLabel: {
+    color: 'white',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: normalize(17),
+  },
 });
 
 export default TaggSquareButton;