Custom component wrapper for fonts

PHOTO EMBED

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