This way the font style works
const styles = StyleSheet.create({
subHeadingCss: {
fontSize: 22,
fontFamily: "century-gothic",
color: "#3e4152"
}
});
This way the font style is not work but the font itself become bold in other font family.
const styles = StyleSheet.create({
subHeadingCss: {
fontSize: 22,
fontWeight: "bold",
fontFamily: "century-gothic",
color: "#3e4152"
}
});
How I have expectations to behave like this mock-up.
How I add the font family in react native?
import React, { Component } from "react";
import { StyleSheet, Text, View, KeyboardAvoidingView } from "react-native";
import { Font } from "expo";
import AddToCartScreen from "./app/components/AddToCartScreen";
export default class App extends Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
async componentWillMount() {
await Font.loadAsync({
"century-gothic": require("./app/assets/fonts/CenturyGothic.ttf")
});
this.setState({ loading: false });
}
render() {
if (this.state.loading) {
//first load the text style then to render its necessary
return (
<View style={styles.container}>
<Text
style={{
fontSize: 36,
alignContent: "center",
alignItems: "center"
}}
>
loading font style ....
</Text>
</View>
);
}
return (
<View style={styles.container}>
<AddToCartScreen/>
</View>
);
}
}
This way the font style works
This way the font style is not work but the font itself become bold in other font family.
How I have expectations to behave like this mock-up.
How I add the font family in react native?