1 files changed, 52 insertions, 26 deletions
diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
index 06a4e44e..f7791d5b 100644
--- a/src/components/camera/FlashButton.tsx
+++ b/src/components/camera/FlashButton.tsx
@@ -1,8 +1,10 @@
-import React, {Dispatch, SetStateAction} from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+import {BlurView} from '@react-native-community/blur';
+import React, {Dispatch, SetStateAction, useMemo} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
 import {FlashMode} from 'react-native-camera';
-import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
-import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import {normalize} from 'react-native-elements';
+import FlashOnIcon from '../../assets/icons/camera/flash-off.svg';
+import FlashOffIcon from '../../assets/icons/camera/flash-on.svg';
 import {styles} from './styles';
 
 interface FlashButtonProps {
@@ -16,27 +18,51 @@ interface FlashButtonProps {
 export const FlashButton: React.FC<FlashButtonProps> = ({
   flashMode,
   setFlashMode,
-}) => (
-  <TouchableOpacity
-    onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
-    style={styles.flashButtonContainer}>
-    {flashMode === 'on' ? (
-      <FlashOnIcon
-        height={30}
-        width={20}
-        color={'white'}
-        style={styles.flashIcon}
-      />
-    ) : (
-      <FlashOffIcon
-        height={30}
-        width={20}
-        color={'white'}
-        style={styles.flashIcon}
-      />
-    )}
-    <Text style={styles.saveButtonLabel}>Flash</Text>
-  </TouchableOpacity>
-);
+}) => {
+  return useMemo(
+    () => (
+      <>
+        <BlurView
+          blurType={'ultraThinMaterialDark'}
+          blurAmount={1}
+          style={[
+            {
+              position: 'absolute',
+              zIndex: 1,
+              top: normalize(44),
+              right: 0,
+              marginRight: normalize(16),
+              height: 86,
+              width: 49,
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 24.5,
+            },
+          ]}
+        />
+        <TouchableOpacity
+          onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+          style={[styles.flashButtonContainerBackground]}>
+          <View
+            style={[
+              styles.flashButtonContainer,
+              {
+                opacity: flashMode === 'off' ? 0.5 : 1,
+              },
+            ]}>
+            {flashMode === 'off' ? (
+              <FlashOffIcon height={30} width={20} color={'white'} />
+            ) : (
+              <FlashOnIcon height={30} width={20} color={'white'} />
+            )}
+            <Text style={styles.saveButtonLabel}>Flash</Text>
+          </View>
+        </TouchableOpacity>
+      </>
+    ),
+    [flashMode],
+  );
+};
 
 export default FlashButton;