Blurred

1 files changed, 38 insertions, 33 deletions

diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
index 86a472b1..b5ac32ec 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/components/common/TaggPopup.tsx
@@ -7,6 +7,7 @@ import {ArrowButton} from '..';
 import {OnboardingStackParams} from '../../routes';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BlurView} from '@react-native-community/blur';
 
 type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
 type TaggPopupNavigationProps = StackNavigationProp<
@@ -31,41 +32,43 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
   const {messageHeader, messageBody, next} = route.params.popupProps;
 
   return (
-    <TouchableOpacity
-      style={styles.container}
-      onPressOut={() => {
-        navigation.goBack();
-      }}>
-      <View style={styles.popup}>
-        <Image
-          style={styles.icon}
-          source={require('../../assets/icons/plus-logo.png')}
-        />
-        <View style={styles.textContainer}>
-          <Text style={styles.header}>{messageHeader}</Text>
-          <Text style={styles.subtext}>{messageBody}</Text>
-        </View>
-        {!next && (
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={() => {
-              navigation.goBack();
-            }}>
-            <CloseIcon height={'50%'} width={'50%'} color={'white'} />
-          </TouchableOpacity>
-        )}
-      </View>
-      {next && (
-        <View style={styles.footer}>
-          <ArrowButton
-            direction="forward"
-            onPress={() => {
-              navigation.navigate('TaggPopup', {popupProps: next});
-            }}
+    <BlurView blurType="light" blurAmount={2} style={styles.container}>
+      <TouchableOpacity
+        style={styles.container}
+        onPressOut={() => {
+          navigation.goBack();
+        }}>
+        <View style={styles.popup}>
+          <Image
+            style={styles.icon}
+            source={require('../../assets/icons/plus-logo.png')}
           />
+          <View style={styles.textContainer}>
+            <Text style={styles.header}>{messageHeader}</Text>
+            <Text style={styles.subtext}>{messageBody}</Text>
+          </View>
+          {!next && (
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => {
+                navigation.goBack();
+              }}>
+              <CloseIcon height={'50%'} width={'50%'} color={'white'} />
+            </TouchableOpacity>
+          )}
         </View>
-      )}
-    </TouchableOpacity>
+        {next && (
+          <View style={styles.footer}>
+            <ArrowButton
+              direction="forward"
+              onPress={() => {
+                navigation.navigate('TaggPopup', {popupProps: next});
+              }}
+            />
+          </View>
+        )}
+      </TouchableOpacity>
+    </BlurView>
   );
 };
 
@@ -75,6 +78,8 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '100%',
+    height: '100%',
   },
   whiteColor: {
     color: 'white',