Cannot call a class as a function in react-native - react-native

Question

I am currently working on a react-native project using EXPO but there occurred an error I will share my error and code where should i change
https://i.stack.imgur.com/kCMGk.png
App.js
import React from 'react';
import MovieList from './components/list';
import Detail from './components/detail';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator({
MovieList: {screen: MovieList},
Detail: {screen: Detail},
})
const App = createAppContainer(AppNavigator);
export default App();
detail.js
import React from 'react';
import MovieList from './components/list';
import Detail from './components/detail';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator({
MovieList: {screen: MovieList},
Detail: {screen: Detail},
})
const App = createAppContainer(AppNavigator);
export default App();

Answer 1

you have written the same stuff in both of the files i.e App.js and details.js.
In react-native generally we defined all the screens in one files similar to what you have done in App.js file and then for all the screens which you have defined in App.js, you have to make classes for the same for MovieList and Detail screens respectively.
Your MovieList and Details screens should look like this....
import React, { Component } from "react";
import { View } from "react-native";
export default class MovieList extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'green' }}>
<Text> Hello world </Text>
</View>
);
}
}