CODEWITHSUNDEEP
cssreact-native
Alex Pickup
Alex Pickup

Reputation: 63

Can't Change Font Family (React-Native)

I'm pretty new to react-native and don't have much experience with CSS. I'm simply trying to change the font family to helvetica. I've tried multiple times and nothing changes

This is my css code:

import {StyleSheet} from "react-native";

export default StyleSheet.create({

  header: {
    backgroundColor:'#004D4D',
    height: 35,
  },

  headerT: {
    color: '#FFFFFF',
    fontSize: 20,
    fontFamily: 'Helvetica',
    textAlign: 'center',
    justifyContent: 'center',
  },

  body: {
    backgroundColor:'#E6FFFF',
    flex:1,
  },

})

This is the page I'm trying to amend

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import styles from "../style/css";

class HomeScreen extends Component{
  render(){
    return(
      <View style={styles.body}>


        <View style={styles.header}>
          <Text style={styles.headerT}>Home Screen</Text>
        </View>


      </View>

    );
  }
}

export default HomeScreen;

This is my directory

enter image description here

Upvotes: 5

Views: 7868

Answers (3)

A.T Rayan
A.T Rayan

Reputation: 169

Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).

Upvotes: 1

Ronak07
Ronak07

Reputation: 894

First you need to add the fonts to the assets folder by downloading whichever font you want for example You want ** Helvetica** then you will need to download Helvetica.ttf file for it.

After that in your package.json you need to add this following lines :-

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

Then we tell react native to link those font files for us.

On Android if you look in the file path android/app/src/main/assets/fonts/ you should see your fonts have been copied over.

On IOS it is added in Info.plist file.

Now Simply add a fontFamily property with your font name.

Upvotes: 2

ridvanaltun
ridvanaltun

Reputation: 3020

A list for avaliable react-native fonts: https://github.com/react-native-training/react-native-fonts

If you are using Android, Helvetica won't work directly, you need to use custom font.

Here is an article for Custom Fonts in React Native for iOS & Android Builds

Upvotes: 2

Related Questions