103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
// src/toolbar.component.js file
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { Camera } from "expo-camera";
|
|
import React from "react";
|
|
import {
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
} from "react-native";
|
|
|
|
const styles = StyleSheet.create({
|
|
alignCenter: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
bottomToolbar: {
|
|
marginTop: "auto",
|
|
height: 100,
|
|
display: "flex",
|
|
justifyContent: "space-evenly",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
},
|
|
captureBtn: {
|
|
width: 60,
|
|
height: 60,
|
|
borderWidth: 2,
|
|
borderRadius: 60,
|
|
borderColor: "#FFFFFF",
|
|
},
|
|
captureBtnActive: {
|
|
width: 80,
|
|
height: 80,
|
|
},
|
|
captureBtnInternal: {
|
|
width: 76,
|
|
height: 76,
|
|
borderWidth: 2,
|
|
borderRadius: 76,
|
|
backgroundColor: "red",
|
|
borderColor: "transparent",
|
|
},
|
|
});
|
|
|
|
const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;
|
|
|
|
export default function CameraControls({
|
|
capturing = false,
|
|
cameraType = CameraTypes.back,
|
|
flashMode = CameraFlashModes.off,
|
|
setFlashMode,
|
|
setCameraType,
|
|
onCaptureIn,
|
|
onCaptureOut,
|
|
onLongCapture,
|
|
onShortCapture,
|
|
}) {
|
|
return (
|
|
<View style={styles.bottomToolbar}>
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
setFlashMode(
|
|
flashMode === CameraFlashModes.on
|
|
? CameraFlashModes.off
|
|
: CameraFlashModes.on
|
|
)
|
|
}
|
|
>
|
|
<Ionicons
|
|
name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
|
|
color="white"
|
|
size={30}
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableWithoutFeedback
|
|
onPressIn={onCaptureIn}
|
|
onPressOut={onCaptureOut}
|
|
onLongPress={onLongCapture}
|
|
onPress={onShortCapture}
|
|
>
|
|
<View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
|
|
{capturing && <View style={styles.captureBtnInternal} />}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
setCameraType(
|
|
cameraType === CameraTypes.back
|
|
? CameraTypes.front
|
|
: CameraTypes.back
|
|
)
|
|
}
|
|
>
|
|
<Ionicons name="md-reverse-camera" color="white" size={30} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|