Custom source React Native

Question

I’m having a hard time adding a font to my React Native project. I have tried with many tutorials but none fits well in my case, and several do not work.

This is where I define my already stylized component (I’ll call Archive1.JS)

import styled from 'styled-components/native';

export const Title = styled.Text`
  font-weight: bold;
  color: #444;
  margin-bottom: 8px;
`;

This is where I use the component I defined above (which I’m going to call Arquivo2.JS)

import {Title} from '../Arquivo1.JS';

export default function Login() {

  return (    

            <Title> Teste </Title>  

         );

}

It is attached in the post my folder structure, and the folder with my fonts

If anyone knows and can help me I’d be grateful.

Answer 1

Friend to insert custom fonts/icons is required to create a file called "React-Native.config.js" in the project root by passing the following code:

RN 6.0+

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts/', './src/assets/icons/'],
};

Then run the commands

react-native link
react-native run-ios ou react-native run-android

In the property Assets pass the path of your sources and icons.

Then you need to run the command React-Native run-io or React-Native run-android as the fonts must be imported into the native project. If the font/icone didn’t import anyway try to import as per the tutorial: https://medium.com/better-programming/using-custom-fonts-in-react-native-2019-289099609837

Then to use just pass the font name in the style in the fontFamily property.

Ex:

style = {
  fontFamily: "Roboto"
}

Or with Styled Components

import styled from 'styled-components/native';

export const Title = styled.Text`
  font-family: 'Roboto'
`;