Component for route must be a React component - react-native

Question

I'm trying to make an app with React native and Expo. Im trying to make a navigation from my Profiel.js to ChoosePhoto.js. When im opening the app on my android emulator i'm getting the error "The component for route ProfielS must be a React component.
the navigator
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ProfielScreen from '../screens/Profiel';
import PhotoScreen from '../screens/ChoosePhoto';
const ProfielNavigator = createStackNavigator ({
ProfielS: ProfielScreen,
PhotoS: PhotoScreen
});
export default createAppContainer(ProfielNavigator);
my app.js
import React from 'react';
import { Text, View, StyleSheet, } from 'react-native';
import ProfielNavigator from './navigation/ProfielNavigator';
export default function App() {
return (
<ProfielNavigator />
);
};
my profiel.js
import React from 'react';
import { Text, View, StyleSheet, Button, Fragement } from 'react-native';
export class GebruikerScherm extends React.Component {
componentWillMount() {
this.getData();
}
constructor() {
super();
this.state = {
gebruikerId: 2,
currentPerson: {},
}
}
getData = () => {
return fetch('(my ip adress)/gebruiker/id?gebruikerId=' + this.state.gebruikerId, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({ currentPerson: responseJson });
console.log(this.state.currentPerson);
})
.catch((error) => {
console.error(error);
});
}
render() {
return(
<View style={styles.container}>
<Text> Gebruiker: {this.state.currentPerson.gebruikerID} </Text>
<Text> Gebruiker: {this.state.currentPerson.gebruikerNaam} </Text>
<Text> Gebruiker: {this.state.currentPerson.biografie} </Text>
</View>
);
};
};
export const ProfielScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 200,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Choosephoto.js
import React from 'react';
import { Text, View, StyleSheet, } from 'react-native';
const ChoosePhotoScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default ChoosePhotoScreen;
I expect my profiel.js page with a button. With the onpress action i want to go from profiel.js to choosephoto.js but the page wont even load.

Answer 1

You are wrong in the way you bring in objects.
The object you are trying to use is export only. Not export default
your profiel.js
export const ProfielScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
your Choosephoto.js
...
export default ChoosePhotoScreen;
Usage
import { ProfielScreen } from '../screens/Profiel';
import ChoosePhotoScreen as PhotoScreen from '../screens/ChoosePhoto';
...
const ProfielNavigator = createStackNavigator ({
ProfielS: ProfielScreen,
PhotoS: PhotoScreen
});
Example
import React from 'react'
This essentially says "find the default export from the react module and import that as a constant that I want to call React."
import { React } from 'react'
This says "find the export from the react module which is explicitly named React, and import that here as a constant that I want to call React."

Answer 2

in profiel.js add default keyword to export :
export default class GebruikerScherm extends React.Component {...
and also recheck all related paths in imports of screens.