Repeat/App.js at master · ConnorCurry/Repeat · 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
import * as React from 'react';
import { StatusBar, View, Animated, Dimensions, Text, } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons, Feather } from '@expo/vector-icons';
import { MenuProvider, Menu } from 'react-native-popup-menu';
// import {useFonts, Signika_400Regular, Signika_300Light, Signika_600SemiBold,} from '@expo-google-fonts/signika'
// import { Audio } from 'expo-av'
// import * as Constants from 'expo'
import { styles } from './Styles/Style.js'
import { CalendarScreen } from './Screens/CalendarScreen.js'
import { PracticeScreen } from './Screens/PracticeScreen.js'
import { AccountScreen } from './Screens/AccountScreen.js'
import { FirstLaunch } from './Components/FirstLaunch.js'
// import { color } from 'react-native-reanimated';


const Tab = createBottomTabNavigator();

export default function App() {
    const [firstCheck, setFirstCheck] = React.useState()
    const checkFirstLaunch = async () => {
        /* console.log("Audio mode: " + await Audio.setAudioModeAsync({
        playsInSilentModeIOS: true,
        allowsRecordingIOS: false,
        staysActiveInBackground: false,
        interruptionModeIOS: INTERRUPTION_MODE_IOS_DO_NOT_MIX,
        })) */
        let value;
        try {
            value = await AsyncStorage.getItem('@launchCount')
        } catch(e) {console.log(e)}
        if (value == null) {
            try {
                await AsyncStorage.setItem('@launchCount', '1')
            } catch(e) {console.log(e)}
            setFirstCheck(true)
        }
    }
    React.useEffect(() => {checkFirstLaunch();}, []);

    // let [fontsLoaded] = useFonts({
    //     Signika_400Regular, Signika_300Light, Signika_600SemiBold,
    // });

    // if (!fontsLoaded) {
    //     return (<Text style={{fontFamily: 'Signika_300Light'}}>"App Loading"</Text>)
    // }

    return (
        <MenuProvider>
        <NavigationContainer>
            <StatusBar barStyle={'light-content'}/>
            <Tab.Navigator
            style={styles.tabBar}
            initialRouteName="Practice"
            // TODO: Add keyboard listener to hide when done
            screenOptions={{
                "tabBarActiveTintColor": "mediumpurple",
                "tabBarInactiveTintColor": "gray",
                "tabBarActiveBackgroundColor": "lightgray",
                "tabBarAllowFontScaling": true,
                "tabBarShowLabel": false,
                "tabBarLabelStyle": {
                    "fontSize": 15,
                    "flex": 1
                },
                "tabBarItemStyle": {
                    "justifyContent": "center"
                },
                "tabBarStyle": [
                    {
                    "display": "flex"
                    },
                    null
                ],
                lazy: true
            }}
            >
            <Tab.Screen
                name="CalendarContainer"
                component={CalendarScreen}
                options={{
                    headerShown: false,
                    tabBarIcon: ({focused}) => <MaterialCommunityIcons focused={focused} name='calendar' size={25} color={focused ? 'mediumpurple' : 'lightgray'}/>,}}
                />
            <Tab.Screen
                name="Practice"
                component={PracticeScreen}
                options={{
                    headerStyle: styles.headerStyle,
                    headerTintColor: 'white',
                    tabBarIcon: ({focused}) => <MaterialCommunityIcons focused={focused} name='music-clef-treble' size={50} color={focused ? 'mediumpurple' : 'lightgray'}/>,}}
                />
            <Tab.Screen
                name="AccountContainer"
                component={AccountScreen}
                options={{
                    headerShown: false,
                    tabBarIcon: ({focused}) => <Feather focused={focused} name='user' size={25} color={focused ? 'mediumpurple' : 'lightgray'}/>,}}
                />
            </Tab.Navigator>
        </NavigationContainer>
        {firstCheck ? <FirstLaunch/> : null}
        </MenuProvider>
    );
}