How to create custom camera component using that return image, in react-native

user_10617262 0
Viewed 173

I'm trying to build custom camera component similar to launchCamera in react-native-image-picker module, that can be called from function and returns image. How this can be implemented using react-native-camera. Because I need to add some custom controls in it.

enter image description here

react-native-camera react-native
1 Answers

create a new file for camera screen and put it in your navigator, and craete a button to navigate to camera screen, ı also share camera screen code example, you can use without authentication

import React, { useRef, useState, useEffect,useContext } from "react";
import { Camera } from "expo-camera";
import styled from "styled-components/native";
import { View, TouchableOpacity,Text } from "react-native";
import { IconButton, Colors } from 'react-native-paper';
import AsyncStorage from "@react-native-async-storage/async-storage";
import { AuthenticationContext } from "../../../authentication.context";



const ProfileCamera = styled(Camera)`
  width: 100%;
  height: 100%;
`;

export const CameraScreen = ({navigation}) => {
  const [isFront,setFront]=useState(true);
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef();
  const {user}=useContext(AuthenticationContext);

  const snap = async () => {
    if (cameraRef) {
      const photo = await cameraRef.current.takePictureAsync();
      AsyncStorage.setItem(`${user.uid}-photo`,photo.uri);
      navigation.goBack();
    }
  };

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    
      <ProfileCamera 
      style={{alignItems:'center',justifyContent:'flex-end',paddingBottom:16}}
      ref={(camera) => (cameraRef.current = camera)} type={isFront? Camera.Constants.Type.front:Camera.Constants.Type.back} ratio={"16:9"}>
         <View style={{flexDirection:'row',alignItems:'center'}}>
         
         
         <IconButton
         
    icon="camera"
    color="grey"
    size={50}
    onPress={snap}
    animated={true}
  />
         <IconButton
    style={{position:'absolute',left:170}}
    icon="camera-switch-outline"
    color="grey"
    size={50}
    onPress={()=>setFront(!isFront)}
    animated={true}
  />
  </View>

      </ProfileCamera>
    
  );
};

user_164624110
Related