panapp/App.js at master · zachvlat/panapp · 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
import React from 'react';
import { useColorScheme, View } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { expressiveLightTheme, expressiveDarkTheme } from './theme';
import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import HomeScreen from './screens/HomeScreen';
import NewsScreen from './screens/NewsScreen';
import RosterScreen from './screens/RosterScreen';
import StandingsScreen from './screens/StandingsScreen';
import FootballScreen from './screens/FootballScreen';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import TopBar from './components/TopBar';

const Tab = createBottomTabNavigator();

function TabNavigator(theme) {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        headerStyle: { backgroundColor: theme.colors.surface },
        headerTintColor: '#fff',
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: theme.colors.secondary,
        tabBarStyle: {
          borderTopWidth: 0,
          elevation: 0,
          backgroundColor: theme.colors.surface,
        },
      }}
    >
      <Tab.Screen
        name="Green Portal"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Νέα"
        component={NewsScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="newspaper" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Ρόστερ"
        component={RosterScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="soccer-field" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Βαθμολογίες"
        component={StandingsScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="table" color={color} size={size} />
          ),
        }}
      />
      {/* <Tab.Screen
        name="Πληροφορίες"
        component={FootballScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="information" color={color} size={size} />
          ),
        }}
      /> */}
    </Tab.Navigator>
  );
}

function AppContent() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? expressiveDarkTheme : expressiveLightTheme;
  const navTheme = colorScheme === 'dark' ? NavigationDarkTheme : NavigationDefaultTheme;
  const insets = useSafeAreaInsets();

  return (
    <PaperProvider theme={theme}>
      <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.colors.background }}>
        <TopBar />
        <NavigationContainer theme={{ ...navTheme, colors: { ...navTheme.colors, background: theme.colors.background } }}>
          {TabNavigator(theme)}
        </NavigationContainer>
      </View>
    </PaperProvider>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
}