JAVASCRIPT

expo custom fonts

$ expo install expo-font @expo-google-fonts/inter

expo font

// How to add custom fonts to react native expo project
// 1 put your font.ttf file in: yourProjectFolder/assets/fonts/FontFile.ttf

// 2 Add this import
import { useFonts } from 'expo-font';

// 3 Add this hook to your component:
    const [loaded] = useFonts({   // make sure path is correct
        MyFontName: require('../assets/fonts/FontFile.ttf'),
    });   

// 4 then use it in your style sheet like this:
const styles = StyleSheet.create({
    myText:{
        fontFamily: 'MyFontName',
    },
});
// hope it helped :)

// IF THIS DOESNT WORK, TRY THIS
// 1 create "react-native.config.js" file in your project folder
// 2 copy this code to the file:
module.exports = {
    assets: ['./assets/fonts'],
};
// 3 open new terminal, and run (React >= 0.6.9):
npx react-native-asset
// or for older react-native versions: 
npx react-native link
// 4 now restart your expo app and it should work

custom fonts in native base expo

import { NativeBaseProvider, extendTheme } from "native-base";

const theme = extendTheme({
  fontConfig: {
    Roboto: {
      100: {
        normal: "Roboto-Light",
        italic: "Roboto-LightItalic",
      },
      200: {
        normal: "Roboto-Light",
        italic: "Roboto-LightItalic",
      },
      300: {
        normal: "Roboto-Light",
        italic: "Roboto-LightItalic",
      },
      400: {
        normal: "Roboto-Regular",
        italic: "Roboto-Italic",
      },
      500: {
        normal: "Roboto-Medium",
      },
      600: {
        normal: "Roboto-Medium",
        italic: "Roboto-MediumItalic",
      },
      // Add more variants
      //   700: {
      //     normal: 'Roboto-Bold',
      //   },
      //   800: {
      //     normal: 'Roboto-Bold',
      //     italic: 'Roboto-BoldItalic',
      //   },
      //   900: {
      //     normal: 'Roboto-Bold',
      //     italic: 'Roboto-BoldItalic',
      //   },
    },
  },

  // Make sure values below matches any of the keys in `fontConfig`
  fonts: {
    heading: "Roboto",
    body: "Roboto",
    mono: "Roboto",
  },
});

export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      <App />
    </NativeBaseProvider>
  );
}