Skip to content

Instantly share code, notes, and snippets.

@happyharis
Created July 23, 2022 12:19
Show Gist options
  • Save happyharis/54eb9e06b577843cde1cd6d271df4776 to your computer and use it in GitHub Desktop.
Save happyharis/54eb9e06b577843cde1cd6d271df4776 to your computer and use it in GitHub Desktop.
PCMOB6B ProfileStack & CameraScreen
import { FontAwesome } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Camera } from "expo-camera";
import React, { useEffect, useRef, useState } from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
export default function CameraScreen() {
const navigation = useNavigation();
const [back, setBack] = useState(true);
const cameraRef = useRef(null);
useEffect(() => {
// Remove the bottom tab
navigation.getParent()?.setOptions({ tabBarStyle: { display: "none" } });
return () => navigation.getParent()?.setOptions({ tabBarStyle: undefined });
}, [navigation]);
async function showCamera() {}
function flip() {
setBack(!back);
}
async function takePicture() {}
useEffect(() => {
showCamera();
}, []);
return (
<View style={{ flex: 1, paddingBottom: 50 }}>
<Camera
style={additionalStyles.camera}
type={back ? Camera.Constants.Type.back : Camera.Constants.Type.front}
ref={cameraRef}
>
<View style={additionalStyles.innerView}>
<View style={additionalStyles.buttonView}>
<TouchableOpacity
onPress={() => navigation.goBack()}
style={additionalStyles.circleButton}
>
<FontAwesome
name="arrow-left"
size={24}
style={{ color: "black" }}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={takePicture}
style={additionalStyles.circleButton}
>
<FontAwesome name="camera" size={24} style={{ color: "black" }} />
</TouchableOpacity>
<TouchableOpacity
onPress={flip}
style={additionalStyles.circleButton}
>
<FontAwesome
name="refresh"
size={24}
style={{ color: "black" }}
/>
</TouchableOpacity>
</View>
</View>
</Camera>
</View>
);
}
const additionalStyles = StyleSheet.create({
camera: {
flex: 1,
},
circle: {
height: 50,
width: 50,
borderRadius: 50,
},
circleButton: {
width: 70,
height: 70,
bottom: 0,
borderRadius: 50,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
},
buttonView: {
flex: 1,
flexDirection: "row",
justifyContent: "space-around",
},
innerView: {
position: "absolute",
bottom: 0,
flexDirection: "row",
padding: 20,
justifyContent: "space-between",
},
});
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { CAMERA_SCREEN, PROFILE_SCREEN } from "../constants";
import ProfileScreen from "../screens/ProfileScreen";
import CameraScreen from "../screens/CameraScreen";
const ProfileStackNav = createStackNavigator();
export default function ProfileStack() {
return (
<ProfileStackNav.Navigator>
<ProfileStackNav.Screen
name={PROFILE_SCREEN}
component={ProfileScreen}
options={{ headerShown: false }}
/>
<ProfileStackNav.Screen
name={CAMERA_SCREEN}
component={CameraScreen}
options={{ headerShown: false }}
/>
</ProfileStackNav.Navigator>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment