Expo Fonts loadAsync results in Text component errors, when loading before react-navigation

Question

I'm attempting to use Font.loadAsync to download two local fonts, when using Expo 44 & React Native 0.64.3 - I've tried various different methods of loading the fonts, with pretty much all of them leading to the same error (with any difference just being different errors) - below is the closest I've gotten to working, followed by the errors I get.

const EyfsStack = () => {
    const [fontLoaded, setFontLoaded] = useState(false); 
  const init = async () => {
    try {
      //ATTEMPT FONT HANDLER - TEST TO SEE IF HANDLING IT WITHIN THE SINGLE USE EFFECT WOULD WORK
      await Font.loadAsync({ Montserrat: require('./assets/fonts/Montserrat-Regular.ttf'), ProxNovaLight: require('./assets/fonts/Proxima-Nova-Light.otf') });
      setFontLoaded(true);
    } catch(e) { navigation.navigate("Login") }
  }
  useEffect(() => { init() }, [])
  
  if (fontLoaded) {
    return (
      <RecoilRoot>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerStyle: {
            backgroundColor: '#373D48',
            height: 100,
          },
          headerStatusBarHeight: 0,
          headerTitle: (props) => <LogoTitle {...props} />, }}> 
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={({navigation}) => ({
              headerRight: () => <Button onPress={() => navigation.navigate("Login")} title="Not You?" color="#fff" />,
              headerLeft: null, //To remove back button
            })}
          />
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Select Class" component={ClassSelectionScreen} options={({navigation}) => ({ headerRight: () => <Text style={styles.needHelpHeader} onPress={() => Linking.openURL('mailto:REDACTED?subject=Help%20Request%20From%20EYFS%20Teacher%20App')}>Need Help?</Text>, })} />
          <Stack.Screen name="Select Pupils" component={SelectPupilsScreen} options={({navigation}) => ({ headerRight: () => <Text style={styles.needHelpHeader} onPress={() => Linking.openURL('mailto:REDACTED?subject=Help%20Request%20From%20EYFS%20Teacher%20App')}>Need Help?</Text>, })} />
          <Stack.Screen name="New Observation" component={ObservationScreen} options={({navigation}) => ({ headerRight: () => <Text style={styles.needHelpHeader} onPress={() => Linking.openURL('mailto:REDACTED?subject=Help%20Request%20From%20EYFS%20Teacher%20App')}>Need Help?</Text>, })} />
          <Stack.Screen name="New Reflection" component={ReflectionScreen} options={({navigation}) => ({ headerRight: () => <Text style={styles.needHelpHeader} onPress={() => Linking.openURL('mailto:REDACTED?subject=Help%20Request%20From%20EYFS%20Teacher%20App')}>Need Help?</Text>, })} />
          
        </Stack.Navigator>
      </NavigationContainer>
      </RecoilRoot>
    );
  }
  else {
    return (
      <ImageBackground source={grassBackgroundImg} resizeMode="cover" style={styles.image}> </ImageBackground>
    );
  } 
};

This no longer results in errors pertaining to fonts not being loaded, however does result in the following:

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (created by View)
    in View (created by ImageBackground)
    in ImageBackground (created by EyfsStack)
    in EyfsStack (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

Stack trace:
  node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
  node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
  node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
  node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
  node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15792:34 in logCapturedError
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15884:20 in update.callback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7199:2 in callCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7220:20 in commitUpdateQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16632:25 in commitLifeCycles
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19216:22 in commitLayoutEffects
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:93:4 in invokeGuardedCallbackProd
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:318:2 in invokeGuardedCallback
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18952:29 in commitRootImpl
  [native code]:null in commitRootImpl
  node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18791:17 in commitRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18192:12 in performSyncWorkOnRoot
  [native code]:null in performSyncWorkOnRoot
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5911:33 in runWithPriority$argument_1
  node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5906:23 in flushSyncCallbackQueueImpl
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5893:28 in flushSyncCallbackQueue
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17745:30 in scheduleUpdateOnFiber
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21484:23 in updateContainer
  node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:22144:17 in render
  node_modules\react-native\Libraries\ReactNative\renderApplication.js:58:4 in renderApplication
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:202:4 in runApplication
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue
  [native code]:null in callFunctionReturnFlushedQueue

The styles for the screens in the navigation stack are declared in a seperate jsx file, so I don't know whether it's neccesary to try and load the fonts there - I did find that the fonts still worked if I attempted to load it in the home screen, but it was causing issues with using useEffect for other purposes, such as the initialisation function for relevant screens.

An example of a style class is below:

loginTitleText: {
      fontSize: 66,
      textAlign: "center",
      paddingTop: 40,
      fontFamily: "ProxNovaLight"
    },

I've tried to use a hook in styles, I've tried to use hooks in the individual screens, I've tried wiping node_modules, expo caches etc - to no avail.

What's most likely to be causing these issues?