Custom font usage

[eaNewton]

I am having a pretty hard time finding any documentation on including custom fonts in @storybook/react-native. There doesn't seem to be any recommended official documentation, and I haven't found a GitHub issue solution that has worked for me yet.

Is there a storybook-recommended way of importing fonts? The screenshots I've provided are using expo functions, but any way of accomplishing this would be of interest.

I am seeing an error explaining that my font has not been loaded through Font.loadAsync:

I have to be missing something incredibly obvious

• I tried including a call to Font.loadSync in /.storybook/index.js - this changes my error message to You started loading the font "Circular-Book", but used it before it finished loading. You need to wait for Font.loadAsync to complete before using the font., but any attempt at making that async has not been successful.

  

• Tried writing it into a function, using as a decorator in /.storybook/preview.js - this doesn't cause the app to crash, but the component disappears altogether in the storybook environment.

  

• There's documentation about adding to the head (https://storybook.js.org/docs/react/configure/story-rendering#adding-to-head) for React web, but I can't really find anything that is specific to React Native

[dannyhw]

@eaNewton adding fonts should work the same as it would in any react native app.

You'd probably be better off putting the font loading one layer up instead of in a decorator since it only needs to run once.

Like

const Storybook = ()=> {
    const [fontsloaded] = useFonts(/* ... stuff here ... */);
    return   <StorybookUIRoot/>
}

[eaNewton]

@dannyhw sorry, could you clarify - that should go in /.storybook/index.js? right now that file looks like

import { getStorybookUI } from "@storybook/react-native"

import "./storybook.requires"

const StorybookUIRoot = getStorybookUI({})

export default StorybookUIRoot

StorybookUIRoot is defined here, as far as i can tell it isn't exported by the library itself, only the getStorybookUI function. the only other place would be in my main layout file potentially, though i'm not sure how that would work, since i'm doing the RN app/storybook switch at the bottom of the file like

let AppEntryPoint = AppLayout;

if (Constants?.expoConfig?.extra?.storybookEnabled === "true") {
  AppEntryPoint = require("../.storybook").default;
}

export default AppEntryPoint;

can you point me in the direction of any sort of documentation that might exist on this subject? thanks!

[eaNewton]

omg i got it, and now i feel stupid... for anyone else, my solution was changing /.storybook/index.js from

import { getStorybookUI } from "@storybook/react-native"

import "./storybook.requires"

const StorybookUIRoot = getStorybookUI({})

export default StorybookUIRoot

to

import { getStorybookUI } from "@storybook/react-native"
import { useFonts } from "expo-font"

import "./storybook.requires"

const StorybookUIRoot = getStorybookUI({})

const Storybook = () => {
  const [fontsLoaded] = useFonts({
    "Circular-Black": require("assets/fonts/lineto-circular-black.ttf"),
    "Circular-Black-Italic": require("assets/fonts/lineto-circular-blackItalic.ttf"),
    "Circular-Bold": require("assets/fonts/lineto-circular-bold.ttf"),
    "Circular-Bold-Italic": require("assets/fonts/lineto-circular-boldItalic.ttf"),
    "Circular-Book": require("assets/fonts/lineto-circular-book.ttf"),
    "Circular-Book-Italic": require("assets/fonts/lineto-circular-bookItalic.ttf"),
    "Circular-Medium": require("assets/fonts/lineto-circular-medium.ttf"),
    "Circular-Medium-Italic": require("assets/fonts/lineto-circular-mediumItalic.ttf"),
  })

  if (!fontsLoaded) return null

  return <StorybookUIRoot />
}

export default Storybook

thanks for pointing me in the right direction @dannyhw!

[dannyhw]

@eaNewton nice, glad you got it sorted 🙏 .