Preload icons

App.tsx

@@ -3,7 +3,7 @@
  * @category BIG
  * @module App
  */
-import React, { useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import 'react-native-gesture-handler'
 import AppLoading from 'expo-app-loading'
 import { Provider } from '@nationskollen/sdk'
@@ -13,33 +13,78 @@ import { LanguageContextProvider } from './translate/LanguageContext'
 import { setCustomText, setCustomTextInput } from 'react-native-global-props'
 import { DarkTheme, LightTheme, ThemeProvider, Theme } from './components/ThemeContext'
 import { useFonts, Roboto_700Bold, Roboto_400Regular } from '@expo-google-fonts/roboto'
-
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'
+import * as Font from 'expo-font'
+import Constants from 'expo-constants'
+import * as Notifications from 'expo-notifications'
 import Footer from './components/Footer/Footer'
+import { Platform } from 'react-native'
+
+Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+        shouldShowAlert: true,
+        shouldPlaySound: false,
+        shouldSetBadge: false,
+    }),
+})
 
 const App = () => {
     const [initialTheme, setInitialTheme] = useState<Theme | null>(null)
     const [initialLanguageKey, setInitialLanguageKey] = useState<number>(1)
     const [isReady, setIsReady] = useState(false)
+    const [expoPushToken, setExpoPushToken] = useState('')
+    const [notification, setNotification] = useState<any>(false)
+
+    const responseListener = useRef<any>()
+    const notificationListener = useRef<any>()
 
     const [loaded] = useFonts({
         Roboto_400Regular,
         Roboto_700Bold,
     })
 
-    // We have to to wait for the app to load the custom font before we render it
     if (!loaded) {
         return null
     }
 
+    /** Global font to be used across the app. */
     const customTextProps = {
         style: {
             fontFamily: 'Roboto_400Regular',
         },
     }
 
+    /** Sets all text and inputboxes-fonts to the font
+     *  set in customTextProps.*/
     setCustomText(customTextProps)
     setCustomTextInput(customTextProps)
 
+    /** Preloads the fonts before app rendering. */
+    function cacheFonts(fonts: { [x: string]: any }) {
+        return fonts.map((font: string) => Font.loadAsync(font))
+    }
+
+    useEffect(() => {
+        registerForPushNotificationsAsync().then((token) => setExpoPushToken(token))
+
+        notificationListener.current = Notifications.addNotificationReceivedListener(
+            (notification) => {
+                setNotification(notification)
+            }
+        )
+
+        responseListener.current = Notifications.addNotificationResponseReceivedListener(
+            (response) => {
+                console.log(response)
+            }
+        )
+
+        return () => {
+            Notifications.removeNotificationSubscription(notificationListener.current)
+            Notifications.removeNotificationSubscription(responseListener.current)
+        }
+    })
+
     if (!isReady) {
         return (
             <AppLoading
@@ -58,6 +103,17 @@ const App = () => {
                     if (language) {
                         setInitialLanguageKey(parseInt(language))
                     }
+
+                    // Preload Icons
+
+                    const fontAssets = cacheFonts([
+                        Ionicons.font,
+                        MaterialCommunityIcons.font,
+                        MaterialIcons.font,
+                    ])
+                    await Promise.all([...fontAssets])
+
+                    registerForPushNotificationsAsync()
                 }}
                 onFinish={() => setIsReady(true)}
                 autoHideSplash={true}
@@ -77,7 +133,7 @@ const App = () => {
         >
             <ThemeProvider initialTheme={initialTheme}>
                 <LanguageContextProvider initialLanguage={initialLanguageKey}>
-                    <PushTokenProvider>
+                    <PushTokenProvider token={expoPushToken} notification={notification}>
                         <Footer />
                     </PushTokenProvider>
                 </LanguageContextProvider>
@@ -86,4 +142,39 @@ const App = () => {
     )
 }
 
+async function registerForPushNotificationsAsync() {
+    let token: string
+
+    if (Constants.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync()
+        let finalStatus = existingStatus
+
+        if (existingStatus !== 'granted') {
+            const { status } = await Notifications.requestPermissionsAsync()
+            finalStatus = status
+        }
+
+        if (finalStatus !== 'granted') {
+            console.log('Failed to get push token for push notification!')
+            return
+        }
+
+        token = (await Notifications.getExpoPushTokenAsync()).data
+        console.log(token)
+    } else {
+        console.log('Must use physical device for Push Notifications')
+    }
+
+    // TODO: Set options to match branding
+    if (Platform.OS === 'android') {
+        Notifications.setNotificationChannelAsync('default', {
+            name: 'default',
+            importance: Notifications.AndroidImportance.MAX,
+            vibrationPattern: [0, 250, 250, 250],
+            lightColor: '#FF231F7C',
+        })
+    }
+    return token
+}
+
 export default App

components/Common/NotificationBadge.tsx

@@ -28,6 +28,7 @@ export type BadgeProps = {
 export const BadgedIcon = ({ name, showNum, color }: BadgeProps) => {
     const { colors } = useTheme()
     const { token } = usePushToken()
+    const { data } = useNotifications(token)
 
     const Icon = <Ionicons name={name} size={23} color={color ?? colors.text}></Ionicons>
 
@@ -36,13 +37,11 @@ export const BadgedIcon = ({ name, showNum, color }: BadgeProps) => {
         return Icon
     }
 
-    const { data } = useNotifications(token)
-
     return (
         <>
             {Icon}
 
-            {data.length > 0 && (
+            {data && (
                 <Badge
                     value={showNum ? data.length : null}
                     containerStyle={styles.container}

components/PushTokenContext.tsx

@@ -5,110 +5,46 @@
  * @module PushTokenContext
  */
 import React, { createContext, useCallback, useState, useContext, useRef, useEffect } from 'react'
-import Constants from 'expo-constants'
-import { Platform } from 'react-native'
 import { useAsync } from 'react-async-hook'
-import * as Notifications from 'expo-notifications'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
 export interface PushTokenContextContract {
     token: string
     lastUpdated?: Date
     setLastUpdated: (date: Date) => void
+    notification: boolean
 }
 
 export interface Props {
     children: Element | Element[]
+    expoToken: string
+    notification: any
 }
 
 export const PushTokenContext = createContext({} as PushTokenContextContract)
 export const usePushToken = () => useContext(PushTokenContext)
 
-Notifications.setNotificationHandler({
-    handleNotification: async () => ({
-        shouldShowAlert: true,
-        shouldPlaySound: false,
-        shouldSetBadge: false,
-    }),
-})
-
-async function registerForPushNotificationsAsync() {
-    let token: string
-
-    if (Constants.isDevice) {
-        const { status: existingStatus } = await Notifications.getPermissionsAsync()
-        let finalStatus = existingStatus
-
-        if (existingStatus !== 'granted') {
-            const { status } = await Notifications.requestPermissionsAsync()
-            finalStatus = status
-        }
-
-        if (finalStatus !== 'granted') {
-            console.log('Failed to get push token for push notification!')
-            return
-        }
-
-        token = (await Notifications.getExpoPushTokenAsync()).data
-        console.log(token)
-    } else {
-        console.log('Must use physical device for Push Notifications')
-    }
-
-    // TODO: Set options to match branding
-    if (Platform.OS === 'android') {
-        Notifications.setNotificationChannelAsync('default', {
-            name: 'default',
-            importance: Notifications.AndroidImportance.MAX,
-            vibrationPattern: [0, 250, 250, 250],
-            lightColor: '#FF231F7C',
-        })
-    }
-
-    return token
-}
-
 // TODO: Allow registration of callbacks for new notifications?
-export const PushTokenProvider = ({ children }: Props) => {
-    const responseListener = useRef<any>()
-    const notificationListener = useRef<any>()
-    const [token, setToken] = useState<string | null>(null)
+export const PushTokenProvider = ({ token, notification, children }) => {
     const { result } = useAsync(async () => await AsyncStorage.getItem('lastUpdated'), [])
     const setLastUpdated = useCallback(
         (date: Date) => AsyncStorage.setItem('lastUpdated', date.toISOString()),
         []
     )
-
-    useEffect(() => {
-        registerForPushNotificationsAsync().then((token) => setToken(token))
-
-        notificationListener.current = Notifications.addNotificationReceivedListener(
-            (notification) => {
-                console.log(notification)
-            }
-        )
-
-        responseListener.current = Notifications.addNotificationResponseReceivedListener(
-            (response) => {
-                console.log(response)
-            }
-        )
-
-        return () => {
-            Notifications.removeNotificationSubscription(notificationListener.current)
-            Notifications.removeNotificationSubscription(responseListener.current)
-        }
-    }, [])
-
     return (
-        <PushTokenContext.Provider
-            value={{
-                token,
-                lastUpdated: result ? new Date(result) : undefined,
-                setLastUpdated,
-            }}
-        >
-            {children}
-        </PushTokenContext.Provider>
+        <>
+            {
+                <PushTokenContext.Provider
+                    value={{
+                        token,
+                        lastUpdated: result ? new Date(result) : undefined,
+                        setLastUpdated,
+                        notification,
+                    }}
+                >
+                    {children}
+                </PushTokenContext.Provider>
+            }
+        </>
     )
 }

package.json

@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",
+    "@types/node": "^15.12.2",
     "@types/react": "~16.9.35",
     "@types/react-native": "~0.63.2",
     "prettier": "^2.2.1",