What Is The Best Way To Have Typography Namespacing In React Native Apps - react-native

Question

I'm working on large scale application where there are lots of font sizes are used. I want to set all type of typography style in the app which can easily reuse. Please suggest me how can i do that. Here is my code.
Is h6, bodyFont has meaningful namespacing if not please help me to define the typgraphy.
// global styles
'use strict';
import { StyleSheet } from "react-native";
import { colors, fontSize, font, fontWeight } from "./base";
const styles = StyleSheet.create({
// font color helepers styles
textPrimary: {
color: colors.primary
},
textMuted: {
color: colors.lightenGrey
},
// font helepers styles
bodyFont: {
color: colors.grey,
fontFamily: font
},
fontWeightBold: {
fontWeight: fontWeight.bold
},
fontWeightLight: {
fontWeight: fontWeight.light
},
fontSm: {
fontSize: fontSize.sm
},
fontXs: {
fontSize: fontSize.xs
},
fontMd: {
fontSize: fontSize.md
},
fontLg: {
fontSize: fontSize.lg
},
fontXl: {
fontSize: fontSize.xl
},
fontXxl: {
fontSize: fontSize.xxl
},
// text alignment helepers
textCenter: {
textAlign: "center"
},
// margin heleper styles
mb10: {
marginBottom: 10
},
mt30: {
marginTop: 30
},
mb30: {
marginBottom: 30
},
mr20: {
marginRight: 20
},
// typography
body: {
color: colors.grey,
fontFamily: font,
fontSize: fontSize.sm,
fontWeight: fontWeight.light,
marginBottom: 10
},
h6: {
color: colors.grey,
fontFamily: font,
fontSize: fontSize.sm,
fontWeight: fontWeight.bold,
marginBottom: 10
},
avatar: {
width: 60,
height: 60,
borderRadius: 30
}
});
export default styles;

Answer 1

I think that you have the right code. Now to use it just import that component where you want to use it.
For example:
import StylesText from 'yourpathhere';
.....
<Text style {StylesText.textPrimary}>{'Hello world'}</Text>