Navigation Issue In React Native - react-native

Question

import {SafeAreaView, StyleSheet,ScrollView, Text,Button, View, TouchableOpacity,TextInput} from 'react-native';
import React, {Component, useState} from 'react';
import Header from './AllHeaders/Header';
import UnitClerkHeader from './AllHeaders/UnitClerkHeader';
import AppointmentHeading from './AllHeaders/AppointmentHeading';
import PatientDoc from './PatientDoc';
import styles from './Styles/CompleteStyling';
export default class HomeScreen extends Component {
render(){
return (
<ScrollView>
<SafeAreaView style={{flex: 1}}>
<View>
<Header name="HOME SCREEN" class= ""/>
<UnitClerkHeader/>
<View style={styles.containerForButton}>
<TouchableOpacity style={styles.button_Side_by_Side}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling}>
REGISTRATION </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_Side_by_Side}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling}>
SEARCH </Text>
</TouchableOpacity>
</View>
<AppointmentHeading name="UPCOMING APPOINTMENTS" class= "" />
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<TouchableOpacity style={styles.buttonGeneral}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling} >
NEXT </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</ScrollView>
);
}
}
ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 HomeScreen.

Answer 1

Check if you imported components properly if you
export default
then you don't use {} when you import and if you just exported your component then you need {}... I suggest you check this first