/Javascript/React/Google font in react native

Google font in react native

// 1) Install two package from expo 
// 1.1) visit https://directory.vercel.app/ and select font you want
// expo install @expo-google-fonts/FONT_FAMILY_NAME 
  //For example, if you choose to use lato we would install:
   //====== expo install @expo-google-fonts/lato     =======
//1.2) =====expo install expo-app-loading   ===========
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { AppLoading } from "expo-app-loading";
import {
  useFonts,
  Roboto_400Regular,
  Roboto_400Regular_Italic
} from "@expo-google-fonts/roboto";

export default function App() {
  let [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_400Regular_Italic
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text style={{ fontFamily: "Roboto_400Regular", fontSize: 28 }}>
          Nice! Support for Google Fonts!
        </Text>
      </View>
    );
  }
}

Similar codes

0 vote238 views1 answer
React-leaflet/core/cjs/pane.js:7%20error15-Jun-2021%2000:45:06%20%20%20%20%20%20const%20pane%20=%20props.pane%20??%20context.pane;
Javascript React
0 vote239 views1 answer
Ng2 validations angular using reactiveforms
Javascript React
0 vote232 views1 answer
Concatenate state with previous state in react redux
Javascript React
2 votes230 views1 answer
How to add multiple style attributes in react element
Javascript React
0 vote194 views1 answer
Integrate my own google pay using react js
Javascript React
0 vote254 views1 answer
Simbu react1
Javascript React
0 vote241 views1 answer
React tooltip on disabled button
Javascript React
34 votes222 views3 answers
React-router
Javascript React
0 vote220 views1 answer
React file preview
Javascript React
0 vote228 views1 answer
React native webview postmessage example
Javascript React