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, Appbar, Button, } 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';
import i18n from "./i18nMessages.js";
import NewPostView from './Views/NewPost.js';
import { TouchableOpacity, View } from 'react-native';
import MenuView from './Views/Menu.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"
        >
            <Tab.Screen
                name="Feed"
                component={Feed}
                options={{
                    tabBarLabel: i18n.t("message.feed"),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="home" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: e => {
                        navigation.navigate('Feed')
                    },
                })}

            />
            <Tab.Screen
                name="Groups"
                component={Groups}
                options={{
                    tabBarLabel: i18n.t('message.groups'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="groups" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="NewPost"
                component={NewPostView}
                options={{
                    tabBarLabel: '',//i18n.t('message.statusUpdate'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="add" color="#fff" size={26} />
                    ),
                    tabBarButton: (props) => (
                        <TouchableOpacity 
                            onPress={props.onPress}
                            style={{
                                top: -27,
                                justifyContent: 'center',
                                alignItems: 'center',
                                
                            }} 
                        >
                           <View style={{
                            height: 56,
                            width: 56,
                            borderRadius: 28,
                            backgroundColor: "#c44d56",
                            paddingTop: 13
                           }}>{props.children}</View>
                        </TouchableOpacity>
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="Courses"
                component={Courses}
                options={{
                    tabBarLabel: i18n.t('message.courses'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="subscriptions" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="Menu"
                component={MenuView}
                options={{
                    tabBarLabel: 'Menu',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="menu" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            {/*
            <Tab.Screen
                name="Logout"
                component={Login}
                options={{
                    tabBarLabel: i18n.t('message.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" />
                <Stack.Navigator screenOptions={{
                    header: (props) => {
                        return (
                            <Appbar.Header style={{backgroundColor: '#fff'}}>
                                {props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{
                                    props.navigation.goBack();
                                }} /> : <></>}
                                <Appbar.Content title='EMI Fellowship'/>
                                <Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
                                <Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />
                            </Appbar.Header>
                        )
                    },
                }}>
                    <Stack.Screen
                        name="MainNavigation"
                        component={MainNavigation}
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                    />
                    <Stack.Screen
                        name="NewPost"
                        component={NewPostView}
                    />
                    <Stack.Screen
                        name="Search"
                        component={Search}
                    />
                    <Stack.Screen
                        name="Notifications"
                        component={NotificationsView}
                    />
                    <Stack.Screen name="SinglePost" component={SinglePost} />
                    <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                </Stack.Navigator>
            </NavigationContainer>
        </PaperProvider>
    );
}