Identifier has already been declared react native - react-native

Question

So I have created a simple react-native following the Coursera lectures.
My Menu component just holds a list of recipes and displays them on the device.
import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';
function Menu(props){
const renderMenuItem = ({item, index}) => {
return(
<ListItem
key={index}
title={item.name}
subtitle={item.description}
hideChevron={true}
onPress={() => props.onPress(item.id)}
leftAvatar={{ source: require('./images/uthappizza.png')}}
/>
);
}
return(
<FlatList
data={props.dishes}
renderItem={renderMenuItem}
keyExtractor={item => item.id.toString()}
/>
)
}
export default Menu;
Next, there is the DishdetailComponent which renders the details of each dish.
import React from 'react';
import { Text, View } from 'react-native';
import { Card } from 'react-native-elements';
function RenderDish(props) {
const dish = props.dish;
if (dish != null) {
return(
<Card
featuredTitle={dish.name}
image={require('./images/uthappizza.png')}>
<Text style={{margin: 10}}>
{dish.description}
</Text>
</Card>
);
}
else {
return(<View></View>);
}
}
function Dishdetail(props) {
return(<RenderDish dish={props.dish} />);
}
export default Dishdetail;
And finally, I have the MainComponent which is like the top component holding the two previous components.
import { View } from 'react-native';
import { DISHES } from '../shared/dishes';
import Dishdetail from './DishdetailComponent';
class Main extends Component {
constructor(props){
super(props);
this.state = {
dishes: DISHES,
selectedDish: null
};
}
onDishSelect(dishId) {
this.setState({selectedDish: dishId})
}
render(){
return(
<View style={{flex:1}}>
<Menu dishes={this.state.dishes} onPress={(dishId) => this.onDishSelect(dishId)} />
<Dishdetail dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]} />
</View>
);
}
}
export default Main;
When I run the app I get this
Did I miss something? Here is my repo if you want to have a closer look.

Answer 1

Few moments here:
1) Seems you forgot to import the Menu component at the top of imports
2) You simply have a typo in the import of DishdetailComponent
Just paste these lines instead of yours
import { View } from "react-native";
import { DISHES } from "../shared/dishes";
import Dishdetail from "./DishDetailComponent";
import Menu from "./MenuComponent";
Also, sometimes bunder crashes and don't reload.
To fix this I would suggest using
yarn start --reset-cache command (but don't forget to kill previous Metro Bundler instance) :)