Font Change (research)

[gabrielpadilla7]

Research how to change the font in the application. This will allow us to further modify the look of the UI.

[YampierFernandez]

https://blog.logrocket.com/adding-custom-fonts-react-native/

I found this web page that goes through the process. I will later add a summary of what's most important.

[YampierFernandez]

-To bootstrap the React Native CLI project, run the following command in your terminal:

npx react-native@latest init CustomFontCLI

-Find your desired fonts in Google Fonts, select the styles you want (e.g., Light 300, Regular 400, etc.), and download the entire font folder using the Download all button.

-The folder will be downloaded as a zip file with a font folder. Inside the folder, there is a static folder where all the .tff files reside. Copy and keep the .tff files.

-Create an assets folder in the root directory of your project folder, with a subfolder called fonts. Then, paste all the .tff files you copied from the static folder earlier into the fonts folder of your project.

-Next, create a react-native.config.js file in the root directory and paste the code below inside it:

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

-Run the following command: npx react-native-asset

-Then, in your App.js file, paste the following code:

import {StyleSheet, Text, View} from 'react-native'; import React from 'react'; const App = () => { return (

This text uses a quick sand font This text uses a quick sand light font This text uses a thin italic raleway font This text uses a thin italic raleway font

); }; export default App; const styles = StyleSheet.create({ container: { backgroundColor: 'lavender', flex: 1, justifyContent: 'center', alignItems: 'center', }, quicksandLight: { fontFamily: 'Quicksand-Light', fontSize: 20, }, quicksandRegular: { fontFamily: 'Quicksand-Regular', fontSize: 20, }, ralewayItalic: { fontFamily: 'Raleway-Italic', fontSize: 20, }, ralewayThin: { fontFamily: 'Raleway-ThinItalic', fontSize: 20, }, });

[gabrielpadilla7]

Research done.