2 files changed, 40 insertions, 46 deletions
diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
index f7791d5b..65c773d9 100644
--- a/src/components/camera/FlashButton.tsx
+++ b/src/components/camera/FlashButton.tsx
@@ -1,10 +1,9 @@
 import {BlurView} from '@react-native-community/blur';
-import React, {Dispatch, SetStateAction, useMemo} from 'react';
+import React, {Dispatch, SetStateAction} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 import {FlashMode} from 'react-native-camera';
-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 FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
 import {styles} from './styles';
 
 interface FlashButtonProps {
@@ -19,49 +18,31 @@ export const FlashButton: React.FC<FlashButtonProps> = ({
   flashMode,
   setFlashMode,
 }) => {
-  return useMemo(
-    () => (
-      <>
-        <BlurView
-          blurType={'ultraThinMaterialDark'}
-          blurAmount={1}
+  return (
+    <>
+      <BlurView
+        blurType={'ultraThinMaterialDark'}
+        blurAmount={1}
+        style={styles.blurView}
+      />
+      <TouchableOpacity
+        onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+        style={styles.flashButtonContainerBackground}>
+        <View
           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],
+            styles.flashButtonContainer,
+            // eslint-disable-next-line react-native/no-inline-styles
+            {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>
+    </>
   );
 };
 
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index beae7082..dbe1500b 100644
--- a/src/components/camera/styles.tsx
+++ b/src/components/camera/styles.tsx
@@ -54,4 +54,17 @@ export const styles = StyleSheet.create({
     height: 40,
     backgroundColor: 'grey',
   },
+  blurView: {
+    position: 'absolute',
+    zIndex: 1,
+    top: normalize(50),
+    right: 0,
+    marginRight: normalize(18),
+    height: 86,
+    width: 49,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 24.5,
+  },
 });