From b966c0e9376777dd9f8d6042d15e7b64868129c3 Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Thu, 14 Jan 2021 14:11:47 -0800
Subject: Blurred

---
 src/components/common/TaggPopup.tsx             | 71 +++++++++++++------------
 src/routes/onboarding/OnboardingStackScreen.tsx |  8 ---
 2 files changed, 38 insertions(+), 41 deletions(-)

(limited to 'src')

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',
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index afc5be99..78f113cc 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -76,14 +76,6 @@ const Onboarding: React.FC = () => {
                 outputRange: [0, 0.25, 0.7, 1],
               }),
             },
-            overlayStyle: {
-              backgroundColor: '#505050',
-              opacity: progress.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 0.9],
-                extrapolate: 'clamp',
-              }),
-            },
           }),
         }}
       />
-- 
cgit v1.2.3-70-g09d2