ParisPlus/navigation.js at master · francoismari/ParisPlus · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { StyleSheet, View, Text, Dimensions } from "react-native";
import React from "react";
import Home from "./src/screens/Home";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Info from "./src/screens/Info";
import PointInfo from "./src/screens/PointInfo";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Entypo, Feather } from "@expo/vector-icons";
import WifiPointInfo from "./src/screens/WifiPointInfo";
import FountainPointInfo from "./src/screens/FountainPointInfo";
import EventDetails from "./src/screens/EventDetails";
import Onboarding from "./src/screens/Onboarding";
import CollectionsScreen from "./src/screens/Collections";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const { width, height } = Dimensions.get("screen");

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        // tabBarShowLabel: false,
        tabBarStyle: styles.tabBar,
        tabBarActiveTintColor: "#44ACC1",
      }}
    >
      {/* <Tab.Screen
        name={"Collections"}
        component={CollectionsScreen}
        options={{
          headerShown: false,
          tabBarShowLabel: false,
          tabBarIcon: ({ focused }) => (
            <Entypo
              // style={{ top: 12 }}
              name={"map"}
              size={24}
              color={focused ? "#44ACC1" : "gray"}
            />
          ),
        }}
      /> */}
      <Tab.Screen
        name={"Explore"}
        component={Home}
        options={{
          headerShown: false,
          tabBarShowLabel: false,
          tabBarIcon: ({ focused }) => (
            <Entypo
              // style={{ top: 12 }}
              name={"map"}
              size={24}
              color={focused ? "#44ACC1" : "gray"}
            />
          ),
        }}
      />
      <Tab.Screen
        name={"About"}
        component={Info}
        options={{
          headerShown: false,
          tabBarShowLabel: false,
          tabBarIcon: ({ focused }) => (
            <Feather
              // style={{ top: 12 }}
              name="info"
              size={24}
              color={focused ? "#44ACC1" : "gray"}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default function StackNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen
        name={"TabNavigator"}
        options={{
          animationEnabled: false,
        }}
        component={TabNavigator}
      />
      <Stack.Group screenOptions={{ presentation: "modal" }}>
        <Stack.Screen name={"PointInfo"} component={PointInfo} />
        <Stack.Screen name={"WifiPointInfo"} component={WifiPointInfo} />
        <Stack.Screen
          name={"FountainPointInfo"}
          component={FountainPointInfo}
        />
        <Stack.Screen name={"EventDetails"} component={EventDetails} />
        <Stack.Screen name={"Onboarding"} component={Onboarding} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    height: "10%",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
    elevation: 4,
    // height: height*0.12
  },
});