import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '@expo/vector-icons';
import MarketplaceIcon from '../assets/icons/MarketplaceIcon';
import OrderIcon from '../assets/icons/OrderIcon';
import Dashboardicon from '../assets/icons/DashboardIcon';
import NewAdIcon from '../assets/icons/NewAdIcon';
import NotificationBadge from '../components/NotificationBadge';
import DashboardScreen from '../screens/dashboard/DashboardScreen';
import Marketplace from '../screens/marketplace/Marketplace';
import NewAdsScreen from '../screens/newAds/newAdScreen';
import NotificationSettings from '../screens/settings/NotificationSettings';
import todoScreen from '../screens/todo/todoScreen';
import WebviewPage from '../screens/todo/WebviewPage';
/**
* Set the default navigationOptions for the app.
* @param {object} param NavigatorObject.
*/
const defaultNavOptions = ({ navigation }) => ({
headerStyle: {
backgroundColor: '#333'
},
headerTitleStyle: {
fontFamily: 'MuseoSansRounded-900',
fontSize: 23
},
headerTintColor: 'white',
headerBackTitle: 'Tilbake',
headerBackTitleStyle: {
fontFamily: 'MuseoSansRounded-900'
},
headerRight: (
<TouchableOpacity
onPress={() => {
navigation.navigate('Settings', { screen: NotificationSettings });
}}
>
<Ionicons style={{ color: 'white', marginRight: 20 }} name={'ios-settings'} size={30} />
</TouchableOpacity>
)
});
const settingsProperties = {
Settings: {
screen: NotificationSettings,
navigationOptions: {
headerTitle: 'Innstillinger'
}
}
};
const marketplaceNavigator = createStackNavigator(
{
Marketplace: {
screen: Marketplace,
navigationOptions: {
headerTitle: 'Markedsplassen'
}
},
Settings: {
screen: NotificationSettings,
navigationOptions: {
headerTitle: 'Innstillinger'
}
}
},
{
defaultNavigationOptions: defaultNavOptions
}
);
const newAdsNavigaotr = createStackNavigator(
{
newAds: {
screen: NewAdsScreen,
navigationOptions: {
headerTitle: 'Nye annonser'
}
},
Settings: {
screen: NotificationSettings,
navigationOptions: {
headerTitle: 'Innstillinger'
}
}
},
{
defaultNavigationOptions: defaultNavOptions
}
);
const todoNavigator = createStackNavigator(
{
Todo: {
screen: todoScreen,
navigationOptions: {
headerTitle: 'Gjøremål'
}
},
Settings: {
screen: NotificationSettings,
navigationOptions: {
headerTitle: 'Innstillinger'
}
},
WebviewPage: {
screen: WebviewPage
}
},
{
defaultNavigationOptions: defaultNavOptions
}
);
const dashboardNavigator = createStackNavigator(
{
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
headerTitle: 'Dashboard'
}
},
Settings: {
screen: NotificationSettings,
navigationOptions: {
headerTitle: 'Innstillinger'
}
}
},
{
defaultNavigationOptions: defaultNavOptions
}
);
const bottomTabNavigator = {
Markedsplassen: {
screen: marketplaceNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
// return <Ionicons style={{ color: tintColor }} name="ios-home" size={25} />;
return (
<MarketplaceIcon
style={{
color: tintColor,
height: 50,
width: 50,
marginLeft: 8,
marginTop: 6
}}
/>
);
},
tabBarColor: 'white'
}
},
'Nye annonser': {
screen: newAdsNavigaotr,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (
<View>
<NewAdIcon
style={{
color: tintColor,
height: 25,
width: 25
}}
/>
<NotificationBadge type="ads" />
</View>
);
}
},
tabBarColor: 'white'
},
Gjøremål: {
screen: todoNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (
<View>
<OrderIcon
style={{
color: tintColor,
height: 60,
width: 65,
padding: 20
}}
/>
<NotificationBadge customStyle={{ marginTop: 16, marginRight: 10 }} />
</View>
);
}
},
tabBarColor: 'white'
},
Dashboard: {
screen: dashboardNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (
<Dashboardicon
style={{
color: tintColor,
height: 28,
width: 28
}}
/>
);
}
},
tabBarColor: 'white'
}
};
const MainNavigator = createBottomTabNavigator(bottomTabNavigator, {
style: {
backgroundColor: '#333'
},
tabBarOptions: {
activeTintColor: '#D6FE90',
inactiveTintColor: 'white',
style: {
backgroundColor: '#333'
},
labelStyle: {
fontFamily: 'MuseoSansRounded-900'
}
}
});
export default createAppContainer(MainNavigator);