Add improved custom font support about dripsy HOT 5 CLOSED

Ran into this issue just the other day and ended up sticking with native fonts because of it.

I think that this would be a great addition.

How do you imagine loading the fonts. Would you use some magic with expo-fonts behind the scene or require the user to load the fonts themselves and then some how do the matching in dripsy?

from dripsy.

I think users will use expo fonts to handle the loading. All dripsy needs to do is match up the correct names and pass them to the component, given a font family and font weight. I'm going to try to get this working today.

from dripsy.

I'm trying this with yarn add dripsy@custom-font at the moment.

Config

The api is as follows:

1. Tell dripsy what your custom fonts are.

const theme = {
  customFonts: {
    // map your custom font name to its weights
    arial: {
      bold: 'arialBold', // fontWeight: fileName
      '400': 'arial'
    },
    sans: {
      bold: 'sansBold',
      '400': 'sans'
    }
  }
}

2. (Optional) give your font families custom names for easier usage (like theme-ui

const theme = {
  ...
  // (optional) define theme value names, which you can use throughout your styles
  fonts: {
    body: 'arial',
    heading: 'sans'
  },
}

3. (Required) explicitly define your fontFamily in your text variants (and input if you want)

const theme = {
  ...
  // 👋 required: explicitly define the fontFamily in your variants
  text: {
    body: {
      fontFamily: 'body' // arial
    },
    h1: {
      fontFamily: 'heading',
      fontWeight: 'bold' // this gets sansBold
    }
  },
  forms: {
    input: { // this is the default TextInput style
      fontFamily: 'body'
    }
  }
}

The final theme looks like this:

const theme = {
  customFonts: {
    arial: {
      bold: 'arialBold',
      '400': 'arial'
    },
    sans: {
      bold: 'sansBold',
      '400': 'sans'
    }
  },
  fonts: {
    body: 'arial',
    heading: 'sans'
  },
  text: {
    body: {
      fontFamily: 'body'
    },
    h1: {
      fontFamily: 'heading',
      fontWeight: 'bold'
    }
  },
  forms: {
    input: {
      fontFamily: 'body'
    }
  }
}

The font family has to be set in the theme for each text variant. I might add an option for a default font in fonts too.

Loading in fonts with expo-font (or whatever you prefer)

As an added step (to include in docs later), you can use expo-font to actually load the fonts in:

// fonts.tsx
import React from 'react'
import { useFonts } from 'expo-font'

export default function Fonts({ children }: { children: React.ReactNode }) {
  const [loaded] = useFonts({
    // 🚨🚨🚨 the name of the default weight here should equal the key from theme.customFonts!
    // otherwise, you will need to explicitly set the fontWeight everywhere
    // since we have theme.customFonts.sans, we name this `sans`
    ['sans']: require('./public/fonts/sansBook.ttf'),
    ['sansBold']: require('./public/fonts/arialBlack.ttf'),

    // same goes here, load in the default font name with the one that matches your theme.customFonts
    ['arial']: require('./public/fonts/arialBook.ttf'),
    ['arialBold']: require('./public/fonts/arialBold.ttf')
  })

  if (!loaded) return null

  return <>{children}</>
}

And then in your app:

// App.tsx
import Fonts from './fonts'

export default function App() {
  return (
    <Fonts>
      <YourAppHere />
    </Fonts>
  )
}

from dripsy.

This is working well in my app, published to 1.4.0.

from dripsy.

Added docs here.

Also added support for a root font, which styles globally.

from dripsy.