Merged with new master.

1 files changed, 20 insertions, 6 deletions

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {
   GestureResponderEvent,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
   TouchableOpacity,
-  ViewProps,
+  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,16 @@ import {
   TAGG_PURPLE,
 } from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
   buttonStyle: 'normal' | 'large' | 'gradient';
   buttonColor: 'purple' | 'white' | 'blue';
   labelColor: 'white' | 'blue';
-  style?: ViewStyle;
-  labelStyle?: TextStyle;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  icon?: Element;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,8 +53,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     case 'large':
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -59,12 +64,16 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress} style={props.style}>
+        <TouchableOpacity
+          {...props}
+          onPress={props.onPress}
+          style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
+            {props.icon}
             <Text style={[styles.gradientLabel, props.labelStyle]}>
               {props.title}
             </Text>
@@ -75,8 +84,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     default:
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -87,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
 
 const styles = StyleSheet.create({
   largeButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: '70%',
@@ -99,6 +111,7 @@ const styles = StyleSheet.create({
     color: '#eee',
   },
   normalButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.45,
@@ -111,6 +124,7 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   gradientButton: {
+    flexDirection: 'row',
     marginTop: '8%',
     borderRadius: 5,
     paddingVertical: '5%',