import React, { Component } from 'react';
import Menu from '/Users/jagadeeshchilukuri/abcd/components/MenuComponent';
import Home from '/Users/jagadeeshchilukuri/abcd/components/HomeComponent';
import Dishdetails from '/Users/jagadeeshchilukuri/abcd/components/DishdetailComponent';
import { View, platform, Image, StyleSheet, ScrollView,Text } from 'react-native';
import { createStackNavigator, createDrawerNavigator, DrawerItems, safeAreaView } from 'react-
navigation-stack';
import { createAppContainer } from 'react-navigation';
import {Icon} from '/Users/jagadeeshchilukuri/abcd/node_modules/react-native-elements';
import { connect } from 'react-redux';
import { fetchDishes, fetchComments, fetchPromos, fetchLeaders } from '/Users/jagadeeshchilukuri/abcd/redux/ActionCreators';
const mapStateToProps = state => {
return {
dishes: state.dishes,
comments: state.comments,
promotions: state.promotions,
leaders: state.leaders
}
}
const mapDispatchToProps = dispatch => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
const MenuNavigator = createAppContainer(createStackNavigator({
Menu: {screen: Menu,navigationOptions : ({navigation}) =>({
headerLeft: <Icon name='menu' size={24}
color='white'
onPress={() => navigation.toggleDrawer()}
/>
})
},
Dishdetails : { screen: Dishdetails }
}, {
initialRouteName: 'Menu',
navationOptions: {
headerStyle: {
backgroundColor: '#512DAB'
},
hearderTinColor: '#fff',
headerTitleStyle: {
color:'#fff'
}
}
}));
const HomeNavigator = createAppContainer(createStackNavigator({
Home: {screen: Home },
}, {
navationOptions: ({navigation}) =>({
headerStyle: {
backgroundColor: '#512DAB'
},
hearderTinColor: '#fff',
headerTitleStyle: {
color:'#fff'
}
})
}));
const CustomDrawerContentComponent = (props) =>(
<ScrollView>
<safeAreaView style={style.container}
forceInset={{top:'always', horizontal:'never'}}>
<View style={StyleSheet.drawerHeader}>
<View style={{flex: 1}}>
<Image source={require('./images/logo.png')}
style={StyleSheet.drawerImage} />
</View>
<View style={{flex: 2}}>
<Text style={style.drawerHeaderText}>Ristorante Con Fusion</Text>
</View>
</View>
<DrawerItems {...props}/>
</safeAreaView>
</ScrollView>
);
const MainNavigator = createAppContainer(createDrawerNavigator({
Home : {
screen: HomeNavigator,
navationOptions:({navigation}) =>({
title: 'Home',
drawerLable: 'Home',
drawerIcon : ({ tinColor}) => (
<Icon
name='home'
type='font-awesome'
size={24}
color={tintColor}
/>
)
})
},
Menu: {
screen: MenuNavigator,
navationOptions: {
title: 'Menu',
drawerLable: 'Menu' ,
drawerIcon : ({ tinColor}) => (
<Icon
name='list'
type='font-awesome'
size={24}
color={tintColor}
/>
)
}
},
}), {
drawerBackgroundColor: '#D1C4E9',
contentComponent: CustomDrawerContentComponent
});
class Main extends Component {
onDishSelect(dishId) {
this.setState({selectctedDish: dishId});
}
componentDidMount() {
this.props.fetchDishes();
this.props.fetchComments();
this.props.fetchPromos();
this.props.fetchLeaders();
}
render() {
return (
<View style={{flex:1, paddingTop: Platform.OS === 'android' ? 0 :
Expo.Constants.statusBarHeight }}>
<MainNavigator />
</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);