title: Identifier has already been declared react native
body: <p>So I have created a simple react-native following the Coursera lectures.</p>
  
  <p>My Menu component just holds a list of recipes and displays them on the device. </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, FlatList } from 'react-native';
  import { ListItem } from 'react-native-elements';
  
  function Menu(props){
  
      const renderMenuItem = ({item, index}) =&gt; {
          return(
              &lt;ListItem
                  key={index}
                  title={item.name}
                  subtitle={item.description}
                  hideChevron={true}
                  onPress={() =&gt; props.onPress(item.id)}
                  leftAvatar={{ source: require('./images/uthappizza.png')}}
              /&gt;
          );
      }
  
      return(
          &lt;FlatList 
              data={props.dishes}
              renderItem={renderMenuItem}
              keyExtractor={item =&gt; item.id.toString()}
          /&gt;
      )
  }
  
  export default Menu;
  </code></pre>
  
  <p>Next, there is the DishdetailComponent which renders the details of each dish.</p>
  
  <pre><code>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(
                  &lt;Card
                  featuredTitle={dish.name}
                  image={require('./images/uthappizza.png')}&gt;
                      &lt;Text style={{margin: 10}}&gt;
                          {dish.description}
                      &lt;/Text&gt;
                  &lt;/Card&gt;
              );
          }
          else {
              return(&lt;View&gt;&lt;/View&gt;);
          }
  }
  
  function Dishdetail(props) {
      return(&lt;RenderDish dish={props.dish} /&gt;);
  }
  
  export default Dishdetail;
  </code></pre>
  
  <p>And finally, I have the MainComponent which is like the top component holding the two previous components.</p>
  
  <pre><code>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(
              &lt;View style={{flex:1}}&gt;
                  &lt;Menu dishes={this.state.dishes} onPress={(dishId) =&gt; this.onDishSelect(dishId)} /&gt;
                  &lt;Dishdetail dish={this.state.dishes.filter((dish) =&gt; dish.id === this.state.selectedDish)[0]} /&gt;
              &lt;/View&gt;
          );
      }
  
  }
  
  export default Main;
  </code></pre>
  
  <p>When I run the app I get this</p>
  
  <p><a href="https://i.stack.imgur.com/Xss7M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xss7M.png" alt="Error"></a></p>
  
  <p>Did I miss something? Here is my <a href="https://github.com/theo82/Multiplatform-Mobile-App-Development-with-React-Native" rel="nofollow noreferrer">repo</a> if you want to have a closer look.</p>