How do I use a custom font family for the Typography component?

[hey6]

I can use custom font family but it should always override it via styles is there a more practical way?

import { StyleSheet, View } from 'react-native'
import { Typography } from '@kujang/uniui'

const DemoScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <Typography style={styles.text}>Lorem Ipsum</Typography>
    </View>
  )
}

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Plus Jakarta Sans',
    fontSize: 22,
    lineHeight: 30,
    fontWeight: '600',
  },
})

export default DemoScreen

[hiriski]

To use a custom font family you can create your own theme configuration that extends from the default theme, you can also use different font types for each variant

import { UnistylesRegistry } from 'react-native-unistyles'
import { theme_lightTheme, theme_breakpoints, ThemeBreakpoints, Themes, Theme } from '@kujang/uniui'

declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends ThemeBreakpoints {}
  export interface UnistylesThemes extends Themes {}
}

export const myTheme: Theme = {
  ...theme_lightTheme,
  typography: {
    body: {
      fontFamily: 'Jost',
    },
    caption: {
      fontFamily: 'Roboto',
    },
  },
}

UnistylesRegistry.addBreakpoints(theme_breakpoints)
  .addThemes({
    light: myTheme,
    dark: myTheme,
  })
  .addConfig({
    adaptiveThemes: true,
    initialTheme: 'light',
  })

In your component

const TypographyExample = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Typography variant='body'>The quick brown fox jumps over the lazy dog</Typography>
      <Typography variant='caption'>The quick brown fox jumps over the lazy dog</Typography>
    </View>
  )
}

[hey6]

Thank you!