EMI-ExpoAPP/App.js

import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import Search from './Views/Search.js';
import Groups from './Views/Groups.js';
import Courses from './Views/Courses.js';
import NotificationsView from './Views/NotificationsView.js';
import SinglePost from './Views/SinglePost.js'
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import API from './API.js';


const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
        ...DefaultTheme.colors,
        primary: '#000000',
        accent: '#0d6efd',
        background: "#edf2f7",
    },
};

Notifications.setNotificationHandler({
    handleNotification: async () => {
        //console.log("notif background");
        return {
            shouldShowAlert: true,
            shouldPlaySound: true,
            shouldSetBadge: true,
        };
    },
});

async function registerForPushNotificationsAsync() {

    if (Platform.OS === 'android') {
        Notifications.setNotificationChannelAsync('default', {
            name: 'default',
            importance: Notifications.AndroidImportance.MAX,
            vibrationPattern: [0, 250, 250, 250],
            lightColor: '#FF231F7C',
        });
    }

    let token;
    if (Device.isDevice) {
        const { status: existingStatus } = await Notifications.getPermissionsAsync();
        let finalStatus = existingStatus;
        if (existingStatus !== 'granted') {
            const { status } = await Notifications.requestPermissionsAsync();
            finalStatus = status;
        }
        if (finalStatus !== 'granted') {
            alert('Failed to get push token for push notification!');
            return;
        }
        token = (await Notifications.getExpoPushTokenAsync({ projectId: "c2bb4d4e-4d4d-4f34-a873-7cad78c6023c", })).data;
    } else {
        alert('Must use physical device for Push Notifications');
    }
    return token;
}



const MainNavigation = () => {
    const [expoPushToken, setExpoPushToken] = useState('');
    const [notification, setNotification] = useState(false);
    const notificationListener = useRef();
    const responseListener = useRef();

    useEffect(() => {
        registerForPushNotificationsAsync().then(async (token) => {
            let isLoggedIn = await API.isLoggedIn();
            if (!isLoggedIn) return false;
            API.registerToken(token);
            return setExpoPushToken(token);
        });

        // This listener is fired whenever a notification is received while the app is foregrounded
        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
            //console.log("got notif", notification)
            setNotification(notification);
        });

        // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
            //console.log("got notif click", notification)
            console.log(response);
        });

        return () => {
            Notifications.removeNotificationSubscription(notificationListener.current);
            Notifications.removeNotificationSubscription(responseListener.current);
        };
    }, []);


    return (
        <Tab.Navigator initialRouteName="Home"
            activeColor="#0d6efd"
            inactiveColor="#FFFFFF"
            barStyle={{ backgroundColor: '#000000' }}
            sceneContainerStyle={{ paddingBottom: 0, paddingTop: 15 }}
        >
            <Tab.Screen
                name="Feed"
                component={Feed}
                options={{
                    tabBarLabel: 'Home',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="home" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: e => {
                        navigation.navigate('Feed')
                    },
                })}

            />
            <Tab.Screen
                name="Notifications"
                component={NotificationsView}
                options={{
                    tabBarLabel: 'Notifications',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="notifications" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="Search"
                component={Search}
                options={{
                    tabBarLabel: 'Search',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="search" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="Groups"
                component={Groups}
                options={{
                    tabBarLabel: 'Groups',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="groups" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="Courses"
                component={Courses}
                options={{
                    tabBarLabel: 'Courses',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="subscriptions" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />

            <Tab.Screen
                name="Logout"
                component={Login}
                options={{
                    tabBarLabel: 'Logout',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="logout" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
        </Tab.Navigator>
    )
}

export default function App() {
    return (
        <PaperProvider settings={{
            icon: props => <MaterialIcons {...props} />,
        }} theme={theme}>
            <NavigationContainer>
                <StatusBar style="dark" translucent={false} />
                <Stack.Navigator>
                    <Stack.Screen
                        name="MainNavigation"
                        component={MainNavigation}
                        options={{
                            headerShown: true,
                            tabBarLabel: 'EMI Social',
                            header: () => { <></> },
                        }}
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                        options={{
                            tabBarLabel: 'Profile'
                        }}
                    />
                    <Stack.Screen name="SinglePost" component={SinglePost} />
                    <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                </Stack.Navigator>
            </NavigationContainer>
        </PaperProvider>
    );
}