Component.js

import React from 'react';

import { Text, } from 'react-native';
import { AppLoading } from 'expo';
import {
  useFonts,
  MPLUSRounded1c_100Thin,
  MPLUSRounded1c_400Regular,
  MPLUSRounded1c_500Medium,
  MPLUSRounded1c_700Bold,
  MPLUSRounded1c_800ExtraBold,
  MPLUSRounded1c_900Black,
} from '@expo-google-fonts/m-plus-rounded-1c';


export const TextFont = ({ children, style }) => {

  let [fontsLoaded] = useFonts({
    MPLUSRounded1c_100Thin,
    MPLUSRounded1c_400Regular,
    MPLUSRounded1c_500Medium,
    MPLUSRounded1c_700Bold,
    MPLUSRounded1c_800ExtraBold,
    MPLUSRounded1c_900Black,
  });


  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <Text
        style={{ fontFamily: 'MPLUSRounded1c_400Regular', ...style }}>
        {children}
      </Text>
    );
  }
};

Page.js

import { TextFont as Text } from '../components/Text'


render() {
   
    return (
      <View style={styles.screen}>
         <Text style={styles.courseSectionLabel}>My Courses</Text>
      </View>
    );
  }
}