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
You can use {'\n'} as line breaks.
You need to use fontSize attribute/property of stylesheet design, in order to set text font size in your Text component. Set Fontsize in react native application : Using below CSS properties you can set font size in your react native application.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With