Getting a Reference Error when starting my react native app - reactjs

Question

I am getting a reference Error message: can't find variable:error, i'm not able to figure out where I have written this variable in code. Someone help!!
This is my App.js (Starting point)
import React from 'react';
import Main from './components/MainComponent';
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
const store = ConfigureStore();
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Main />
</Provider>
);
}
}
ActionTypes.js (This file represents different Actions which can be dispatched)
export const DISHES_LOADING = 'DISHES_LOADING';
export const ADD_DISHES = 'ADD_DISHES';
export const DISHES_FAILED = 'DISHES_FAILED';
export const ADD_COMMENTS = 'ADD_COMMENTS';
export const COMMENTS_FAILED = 'COMMENTS_FAILED';
export const PROMOS_LOADING = 'PROMOS_LOADING';
export const ADD_PROMOS = 'ADD_PROMOS';
export const PROMOS_FAILED = 'PROMOS_FAILED';
export const LEADERS_LOADING = 'LEADERS_LOADING';
export const ADD_LEADERS = 'ADD_LEADERS';
export const LEADERS_FAILED = 'LEADERS_FAILED';
ActionCreators.js (This file fetches data from a fake Rest api and performs the necessary computations dispatches the data and action accordingly )
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { dishes } from './dishes';
import { comments } from './comments';
import { promotions } from './promotions';
import { leaders } from './leaders';
export const ConfigureStore = () => {
const store = createStore(
combineReducers({
dishes,
comments,
promotions,
leaders
}),
applyMiddleware(thunk, logger)
);
return store;
}
AboutComponent.js (This is one of my component)
import React, {Component} from 'react';
import { Text, ScrollView } from 'react-native';
import { Card } from 'react-native-elements';
import { FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';
import { Loading } from './LoadingComponent';
const mapStateToProps = state => {
return {
leaders: state.leaders
}
}
function History() {
return(
<Card title="Our History">
<Text style={{margin: 10}}>
Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.{"\n\n"}
The restaurant traces its humble beginnings to The Frying Pan, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.
</Text>
</Card>
);
}
function RenderLeaders(props) {
const leaders = props.leaders;
const renderLeaderItems = ({item, index}) => {
return (
<ListItem
key={index}
title={item.name}
subtitle={item.description}
hideChevron={true}
leftAvatar={{source: {uri: baseUrl + item.image}}}
/>
);
};
return (
<Card title='Comments' >
<FlatList
data={leaders}
renderItem={renderLeaderItems}
keyExtractor={item => item.id.toString()}
/>
</Card>
);
}
class About extends Component {
static navigationOptions = {
title: 'About Us'
};
render(){
if (this.props.leaders.isLoading) {
return(
<ScrollView>
<History />
<Card
title='Corporate Leadership'>
<Loading />
</Card>
</ScrollView>
);
}
else if (this.props.leaders.errMess) {
return(
<ScrollView>
<History />
<Card
title='Corporate Leadership'>
<Text>{this.props.leaders.errMess}</Text>
</Card>
</ScrollView>
);
}
else{
return (
<ScrollView>
<History/>
<RenderLeaders leaders={this.props.leaders.leaders} />
</ScrollView>
)
}
}
}
export default connect(mapStateToProps)(About);
MainComponent.js (The file which controls the side drawer and navigation)
import React, {Component } from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import { View, Platform, Image, StyleSheet, ScrollView, Text } from 'react-native';
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer, SafeAreaView } from 'react-navigation';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import Home from './HomeComponent';
import Contact from './ContactComponent';
import About from './AboutComponent';
import {Icon} from 'react-native-elements';
import { connect } from 'react-redux';
import { fetchDishes, fetchComments, fetchPromos, fetchLeaders } from '../redux/ActionCreators';
const mapStateToProps = state => {
return {
}
}
const mapDispatchToProps = dispatch => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
})
const MenuNavigator = createStackNavigator({
Menu:{screen:Menu,
navigationOptions:({navigation}) => ({
headerLeft: <Icon name='menu' size={24} color='white'
onPress={()=>navigation.toggleDrawer()}
/>
})},
DishDetail: { screen: DishDetail }
}, {
initialRouteName: 'Menu',
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff"
}
}
});
const HomeNavigator = createStackNavigator({
Home: { screen: Home }
}, {
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff",
headerLeft: <Icon name='menu' size={24} color='white'
onPress={()=>navigation.toggleDrawer()}
/>
})
});
const AboutNavigator = createStackNavigator({
Home: { screen: About }
}, {
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff",
headerLeft: <Icon name='menu' size={24} color='white'
onPress={()=>navigation.toggleDrawer()}
/>
})
});
const ContactNavigator = createStackNavigator({
Home: { screen: Contact }
}, {
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff",
headerLeft: <Icon name='menu' size={24} color='white'
onPress={()=>navigation.toggleDrawer()}
/>
})
});
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={styles.drawerHeader}>
<View style={{flex:1}}>
<Image source={require('./images/logo.png')} style={styles.drawerImage} />
</View>
<View style={{flex: 2}}>
<Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
</View>
</View>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
);
const MainNavigator = createDrawerNavigator({
Home:
{ screen: HomeNavigator,
navigationOptions: {
title: 'Home',
drawerLabel: 'Home',
drawerIcon: ({tintColor}) => (
<Icon
name='home'
type='font-awesome'
size={24}
color={tintColor}
/>
)
}
},
About:
{ screen: AboutNavigator,
navigationOptions: {
title: 'About Us',
drawerLabel: 'About Us',
drawerIcon: ({tintColor}) => (
<Icon
name='info-circle'
type='font-awesome'
size={24}
color={tintColor}
/>
)
}
},
Menu:
{ screen: MenuNavigator,
navigationOptions: {
title: 'Menu',
drawerLabel: 'Menu',
drawerIcon: ({tintColor}) => (
<Icon
name='list'
type='font-awesome'
size={24}
color={tintColor}
/>
)
},
},
Contact:{
screen:ContactNavigator,
navigationOptions: {
title: 'Contact Us',
drawerLabel: 'Contact Us',
drawerIcon: ({tintColor}) => (
<Icon
name='address-card'
type='font-awesome'
size={22}
color={tintColor}
/>
)
}
}
}, {
drawerBackgroundColor: '#D1C4E9',
contentComponent: CustomDrawerContentComponent
});
const App = createAppContainer(MainNavigator);
class Main extends Component {
componentDidMount() {
this.props.fetchDishes();
this.props.fetchComments();
this.props.fetchPromos();
this.props.fetchLeaders();
}
onDishSelect(dishId) {
this.setState({selectedDish: dishId})
}
render() {
return (
<View style={{flex:1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
<App />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
drawerHeader: {
backgroundColor: '#512DA8',
height: 140,
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'row'
},
drawerHeaderText: {
color: 'white',
fontSize: 24,
fontWeight: 'bold'
},
drawerImage: {
margin: 10,
width: 80,
height: 60
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Main);