Using custom fonts and, button with icons using react-native-paper

Question

!!Beginner to React Native and RN Paper.

I'm trying to use React Native Paper elements like Button and TextInput. I coded the button like below code,

<Button
  icon="camera"
  mode="contained"
  loading="true"
  style={styles.button}
  contentStyle={{
    height: 50,
    backgroundColor: "#2196f3",
  }}
  labelStyle={{
    fontFamily: "Raleway-Bold",
    fontSize: 15,
  }}
>
  Login button
</Button>

With this code, I was able to get a button with Camera icon.

But the problem started when I started to load my custom fonts with Font.loadAsync for loading custom fonts (Raleway-Bold).

import { Button, TextInput } from "react-native-paper";

import {
  View,
  TouchableWithoutFeedback,
  Keyboard,
  TouchableOpacity,
} from "react-native";

const Login = () => {
  return (
        <View >
            <Button
              icon="camera"
              mode="contained"
              loading="true"
            >
              Login button
            </Button>
          </TouchableOpacity>
        </View>
  );
};

export default Login;

In app.js I've loaded the custom fonts using

Font.loadAsync({"Raleway-Bold": require("./assets/fonts/Raleway-SemiBold.ttf")})

After this, I'm getting errors like,

fontFamily "Material Design Icons" is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

If this is a custom font, be sure to load it with Font.loadAsync.

Anyone have faced similar kinds of issues?

Note: Using the latest expo version.

Thanks in Advance for your time.

Ido Levi Ido Levi · Accepted Answer · 2021-01-16T11:52:07

This is how I load fonts in my react native expo app and it works fine, hope that will help:

Import AppLoading & expo-font:

import { AppLoading } from 'expo'
import * as Font from 'expo-font'

Write FetchFonts function:

const fetchFonts = () => {
    return Font.loadAsync({
    montregular: require('../../../assets/fonts/Montserrat-Regular.ttf'),
    montsemibold: require('../../../assets/fonts/Montserrat-SemiBold.ttf'),
    montbold: require('../../../assets/fonts/Montserrat-Bold.ttf')
    });
}

Add a flag to your state:

const [fontsLoaded, setFontsLoaded] = useState(false);

In you render method, render conditionally:

if(!fontsLoaded) return (   
        <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontsLoaded(true)}
      />
  );
else return (
<View>
   Your screen code.....
</View
);

Using custom fonts and, button with icons using react-native-paper

1 Answers