1

I'm writing a react-native app where 99% of the text will have Lato as default font.

I know I can set the fontFamily of the Text component like this:

<Text style={{
  fontFamily: 'Lato-Regular'
}}>Home page.</Text>

But I would like to not repeat myself on each Text component.

Is there a way to define a global text style so I can use Text without always settings style option, or have I to create my own Text component?

What is the best and recommended way to deal with this?

Note: I'm using expo, in case this is important.

Soullivaneuh
  • 3,553
  • 3
  • 37
  • 71
  • check this------> https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/ – Pramod Apr 04 '20 at 18:13
  • create your own text component, style with what you need and import and use it. – U.A Apr 05 '20 at 05:58

1 Answers1

0

Create one GlobalStyle.js

import { Dimensions } from 'react-native';

const _colorSet = {
  // buttonColor: '#CEA991',
  buttonColor: '#f90b05',
  btnBlue: '#00ffff',
  buttonColorDark: '#90786D',
  separatorGray: '#ECECEC',
  mainBgColor: '#F5F5F5',
  deleteRed: '#E1312B',
  black: '#000000',
  white: '#FFFFFF',
  whiteLight: '#f5f5f5',
  WhiteGrey: '#fafafa',
  red: '#FF0000',
  btnRed: '#f90b05',
  btnBorder: '#f90601',
  txtRed: '#fa0f09',
  ModifierRed: '#f90601',
  BtnFB: '#596eb7',
  appBlack: '#686868',
  transparent: 'transparent',
  mainBgColorSemiTransparent: '#F5F5F588',
  green: '#00FF00',
  bgBlack: '#202023',
  grey: '#757575',
  LightGrey: '#666666',
  BorderGrey: '#e5e5e5',
};

const _fontSet = {
  Regular: 'Lato-Regular',
  Bold: 'Lato-Bold',
  SemiBold: 'Lato-SemiBold',
  Lite: 'Lato-Light',
  ExtraBold: 'Lato-ExtraBold',
};

const GlobalStyle = {
  colorSet: _colorSet,
  fontSet: _fontSet,
  windowW: WINDOW_WIDTH,
  windowH: WINDOW_HEIGHT,
  catItemSize: 90,
};

export default GlobalStyle;

then Create CommonStyle.js

import { StyleSheet, Platform, StatusBar } from 'react-native';
import GlobalStyle from './GlobalStyles';


const CommonStyle = StyleSheet.create({

TextStyle: {
   fontSize:16,
   fontFamily: GlobalStyle.fontSet.Regular,// where regular will be 'Lato Regular'
   color: GlobalStyle.colorSet.txtRed,
  },


});

Then start using it like this

import CommonStyle from '../../utils/CommonStyles';

<Text style={[CommonStyle.TextStyle]}>Home page.</Text>

and enjoy....

Harsh Vaid
  • 179
  • 1
  • 6
  • Thanks for your help, but I still have to set the style to every Text component. This is not what I'm looking for. It looks like I have to create my own component according to this answer: https://stackoverflow.com/a/35262169/1731473 – Soullivaneuh Apr 06 '20 at 09:46
  • If you are feeling adventurous, you can patch react-native library itself with the patch-package library (https://github.com/ds300/patch-package). It will complete your task of having a global style. – Alex Pogiba Oct 14 '21 at 11:07