Custom component wrapper for fonts
Wed Mar 16 2022 10:18:37 GMT+0000 (Coordinated Universal Time)
Saved by
@markmarleydev
// Within own file --- BodyText.js
const BodyText = props => <Text style={styles.body}> {props.children}</Text>
const styles = StyleSheet.create({
body: {
fontFamily: "open-sans"
}
});
export default BodyText
Within file where font/font weight needed
<BodyText> I am in open sans font </BodyText>
To include styles within the the specified file also follow the next syntax instead
const BodyText = props => <Text style={...styles.body, props.style}> {props.children}</Text>
Another option would be to create a seperate globally managed style set which could be used to contain any styles other than fonts then imported into where its needed
const styles = StyleSheet.create({
bodyText: {
fontFamily: "open-sans"
},
title: {
fontFamily: "open-sans-bold"
fontWeight: "bold",
}
});
import defaultStyles from "FILE-NAME "
<Text style={defaultStyles.bodyText}> I am in open sans font </Text>
content_copyCOPY
Comments