frezh/Navigation.js at master · frezh-org/frezh · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'react';
import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { createStackNavigator } from 'react-navigation-stack';
import { Feather } from '@expo/vector-icons';
import { createFluidNavigator } from 'react-navigation-fluid-transitions';

import HomeScreen from './screens/Home';
import WorldScreen from './screens/World';
import RankingScreen from './screens/Ranking';
import DetailScreen from './screens/Detail';
import AboutScreen from './screens/About';
import AddScreen from './screens/Add';
import AddConfirmScreen from './screens/AddConfirm';

const AppTab = createMaterialBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => <Feather name='map-pin' color={tintColor} size={21} />,
    },
  },
  World: {
    screen: WorldScreen,
    navigationOptions: {
      title: 'World',
      tabBarIcon: ({ tintColor }) => <Feather name='map' color={tintColor} size={21} />,
    },
  },
  Ranking: {
    screen: RankingScreen,
    navigationOptions: {
      title: 'Ranking',
      tabBarIcon: ({ tintColor }) => <Feather name='bar-chart-2' color={tintColor} size={21} />,
    },
  },
}, {
  shifting: true,
  keyboardHidesNavigationBar: false,
  activeTintColor: '#333333',
  inactiveTintColor: '#FFCEC8',
  barStyle: { backgroundColor: '#fff' },
});

const AppStack = createFluidNavigator({
  Tab: {
    screen: AppTab,
    navigationOptions: {
      header: null,
    },
  },
  Detail: {
    screen: DetailScreen,
    navigationOptions: {
      header: null,
    },
  },
  Add: {
    screen: AddScreen,
    navigationOptions: {
      header: null,
    },
  },
  AddConfirm: {
    screen: AddConfirmScreen,
    navigationOptions: {
      header: null,
    },
  },
  About: {
    screen: AboutScreen,
    navigationOptions: {
      header: null,
    },
  },
});

export default createAppContainer(AppStack);