H1 doesn't render fontFamily on Android

👋🏽
Hello! I’m implementing a simple header in my app and it seems like Android is not rendering the font properly

iOS

Android

import { H1, Theme } from 'dripsy'
import theme from './theme'

// simplified example
const App = () => (
  <DripsyProvider theme={theme}>
    <H1>Hello world</H1>
  </DripsyProvider>
)

import { Theme } from 'dripsy'

const makeTheme = <T extends Theme>(t: T): T => t

const theme = makeTheme({
  fonts: {
    root: 'nunito',
  },
  customFonts: {
    nunito: {
      bold: 'nunitoBold',
      default: 'nunito',
      normal: 'nunito',
      400: 'nunito',
      500: 'nunitoSemiBold',
      600: 'nunitoBold',
      700: 'nunitoBold',
      800: 'nunitoExtraBold',
      900: 'nunitoBlack',
    },
  },
  text: {
    default: {
      fontSize: 18,
      color: 'text',
    },
    h1: {
      fontSize: [24, 32],
      color: 'text',
    },
  },
})

export default theme

I’ve noticed if I commented this line out in @expo/html-elements, it starts to work: https://github.com/expo/expo/blob/master/packages/html-elements/src/elements/Headings.tsx#L39

I’ve tried debugging the code in my node modules but still can’t figure it out. It’s weird that it works perfectly fine in iOS, but not in Android 🤔

Any help is appreciated!

In the meantime, my workaround is

<H1 as={Text} >Hello world</H1>

and it’s still able to pull variant “text.h1” 👍🏽

Thank you!!

[nandorojo]

For now, I recommend making your own H1, …etc text components, like so:

import { Text } from 'dripsy'

const H1 = (props: React.ComponentProps<typeof Text>) => (
  <Text
    {...props}
    variant="h1"
    accessibilityRole="heading"
    accessibilityLevel={1}
  />
)

I’ll work on a better internal solution that supports Android soon. However, we should open an issue at @expo/html-elements, since that’s where the bug lies.

[nandorojo]

I mean this

<H1 as={Text} >Hello world</H1>

still had the correct font bolded so 🤷🏽‍♂️

Maybe I can create my own H1, H2, etc by wrapping Text and the proper variants?

Yeah, that’s because you set it to bold for h1 in your theme. You could indeed do that.