storefront-app/App.tsx at main · fleetbase/storefront-app · 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
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { TamaguiProvider, Theme, useTheme } from 'tamagui';
import { Toasts } from '@backpackapp-io/react-native-toast';
import { PortalProvider, PortalHost } from '@gorhom/portal';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { AuthProvider } from './src/contexts/AuthContext';
import { SocketClusterProvider } from './src/contexts/SocketClusterContext';
import { CartProvider } from './src/contexts/CartContext';
import { LanguageProvider } from './src/contexts/LanguageContext';
import AppNavigator from './src/navigation/AppNavigator';
import TestNavigator, { TestTabNavigator } from './src/navigation/TestNavigator';
import { ThemeProvider, useThemeContext } from './src/contexts/ThemeContext';
import { NotificationProvider } from './src/contexts/NotificationContext';
import { getDefaultStyle as getDefaultToastStyle } from './src/utils/toast';
import config from './tamagui.config';

const DEBUG_APP = false;
function AppContent(): React.JSX.Element {
    const { appTheme } = useThemeContext();

    return (
        <TamaguiProvider config={config} theme={appTheme}>
            <Theme name={appTheme}>
                <GestureHandlerRootView style={{ flex: 1 }}>
                    <SafeAreaProvider>
                        <BottomSheetModalProvider>
                            <NotificationProvider>
                                <LanguageProvider>
                                    <AuthProvider>
                                        <SocketClusterProvider>
                                            <CartProvider>
                                                <AppNavigator />
                                                <Toasts extraInsets={{ bottom: Platform.OS === 'android' ? 25 : 80 }} defaultStyle={getDefaultToastStyle()} />
                                                <PortalHost name='MainPortal' />
                                                <PortalHost name='BottomSheetPanelPortal' />
                                                <PortalHost name='LocationPickerPortal' />
                                            </CartProvider>
                                        </SocketClusterProvider>
                                    </AuthProvider>
                                </LanguageProvider>
                            </NotificationProvider>
                        </BottomSheetModalProvider>
                    </SafeAreaProvider>
                </GestureHandlerRootView>
            </Theme>
        </TamaguiProvider>
    );
}

function TestContent(): React.JSX.Element {
    const { appTheme } = useThemeContext();
    return (
        <TamaguiProvider config={config} theme={appTheme}>
            <Theme name={appTheme}>
                <GestureHandlerRootView style={{ flex: 1 }}>
                    <SafeAreaProvider>
                        <BottomSheetModalProvider>
                            <NotificationProvider>
                                <LanguageProvider>
                                    <AuthProvider>
                                        <SocketClusterProvider>
                                            <CartProvider>
                                                <TestTabNavigator />
                                                {/* <TestNavigator /> */}
                                                <Toasts extraInsets={{ bottom: 80 }} defaultStyle={getDefaultToastStyle()} />
                                                <PortalHost name='MainPortal' />
                                                <PortalHost name='BottomSheetPanelPortal' />
                                                <PortalHost name='LocationPickerPortal' />
                                            </CartProvider>
                                        </SocketClusterProvider>
                                    </AuthProvider>
                                </LanguageProvider>
                            </NotificationProvider>
                        </BottomSheetModalProvider>
                    </SafeAreaProvider>
                </GestureHandlerRootView>
            </Theme>
        </TamaguiProvider>
    );
}

function App(): React.JSX.Element {
    if (DEBUG_APP) {
        return (
            <PortalProvider>
                <ThemeProvider>
                    <TestContent />
                </ThemeProvider>
            </PortalProvider>
        );
    }

    return (
        <PortalProvider>
            <ThemeProvider>
                <AppContent />
            </ThemeProvider>
        </PortalProvider>
    );
}

export default App;