1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
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 {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 {
flashMode: keyof FlashMode;
setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
}
/*
* Toggles between flash on/off modes
*/
export const FlashButton: React.FC<FlashButtonProps> = ({
flashMode,
setFlashMode,
}) => {
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;
|
