Hello,everyone I am new to react native, I am trying to build a page when you on the page and the camera shows up like snap chat camera on the phone

Question

import React, { useState, useEffect, Component} from 'react';
import { StyleSheet, Text, TouchableOpacity, View, SafeAreaView, Image } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Permissions } from 'expo';
import { Container, Content, Header, Item, Icon, Input, Button } from 'native-base';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Camera,CameraType } from 'expo-camera';



export default function VideoScreen() {
  const [hasCameraPermission, sethasCameraPermission] = useState(null);
  const [camera, setCamera] = useState(null);
  const [image, setImage] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.front);





  useEffect(() => {
     (async () => {
     const cameraStatus = await Camera.requestCameraPermissionsAsync();
     sethasCameraPermission(cameraStatus.status === 'granted');
    
     })();
 }, []);
    
     const takePicture = async () => {
    if (Camera) {
     const data = await camera.takePictureAsync(null)
     setImage(data.uri);
 }
    }
    
if (hasCameraPermission === false) {
    return <Text>No Camera Access</Text>;
}
    
return (
    <View style={{ flex: 1 }}>
 <Camera ref={ref => setCamera(ref)} style={{ flex: 1, justifyContent:'space-between' }}>
 <Header
searchBar rounded
 style={{position: 'absolute', backgroundColor: 'transparent',
 left:0, top: 0, right: 0, zIndex:100}}>
 <View style={{flexDirection:'row', flex:4}}>
<Icon name="campfire" style={{ color: 'white' }} />
 <Item style={{ backgroundColor: 'transparent' }}>
<Icon name="ios-search" style={{color:'white',fontSize:24, fontWeight:'bold'}}></Icon>
 <Input placeholder="Search"
placeholderTextColor="white"/>
 </Item>
</View>
 <View style={{flexDirection:'row', flex:2,justifyContent:'space-around'}}>
 <Icon name="ios-flash" style={{ color: 'white', fontWeight:'bold'}} />
          <Icon
            name="ios-reverse-camera"
            style={{ color: 'white', fontWeight: 'bold' }}
            onPress={() => {
              setType(type ===
                Camera.Constants.Type.front ?
                Camera.Constants.Type.back :
                Camera.Constants.Type.front)
            }} />

 </View>
</Header>
 <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginBottom: 15,alignItems:'flex-end'}} >
 <MaterialCommunityIcons name="message-reply"
style={{ color: 'white', fontSize: 36 }}>
</MaterialCommunityIcons>
 <View style={{ alignItems: 'center' }}>
 <MaterialCommunityIcons name="circle-outline"
            style={{ color: 'white', fontSize: 100 }}
          
            onPress={() => takePicture()}>

         {image && <Image source={{uri:image}} style={{flex:1}}/>} 
          
          
          
          
          
 </MaterialCommunityIcons>
 <Icon name="ios-images" style={{ color: 'white', fontSize: 36 }} />
 </View>
<MaterialCommunityIcons name="google-circles-communities"
 style={{ color: 'white', fontSize: 36 }}>
 </MaterialCommunityIcons>
 </View>
 </Camera>
</View> 
  );
};

I am trying to Add a camera page like snapchat camera when you open the app the camera shows up,and you can take the picture or record a video on that, I have try my best to write the code and check agian, and I still keep getting the mistakes saying Rendor Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of VideoScreen.