React Native SDK - Styling text with custom fonts

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
590f4251081d402c96f40922159dcfc5

What are you trying to accomplish
Fetch section model into React Native application

Screenshots or video link

image
image1290×2796 245 KB

Code stack you are integrating Builder with
React Native

I can not get the text block to render with the correct font. We are using NotoSans as our primary font in the react native app. I have imported it as a custom font into builder but the when displaying the content the system font is rendered.

2

Hey @tobias.akeblom I tested the Nano font on your space on a test page I created. I was able to apply it to the text blocks added.

Screenshot 2024-08-30 at 6.03.39 PM
Screenshot 2024-08-30 at 6.03.39 PM2148×1286 133 KB

Is there a specific Nano Sans font you are unable to use? Could you please share a screen recording or loom of the issue?

3

I am able to apply the font in the builder editor and there it looks like it working. But when I try to use the section in our react native application the correct font is not rendered.

4

Hey, @tobias.akeblom, could you please give me a step-by-step procedure to replicate the issue? A screen recording would be very helpful.

5

Hey, sorry for the late answer. Had to work on other stuff for a while. Here you can see a screen shot of how the content is displayed in the React Native application compared to how it looks in the builder editor.

image
image1920×1010 182 KB

This is how I am using it

Fetching entries:

fetchEntries({
      model: 'story',
      apiKey: key,
      options: { locale: builderLocale },
      cacheSeconds: INTERNAL_BUILD ? 0 : null,
      staleCacheSeconds: INTERNAL_BUILD ? 0 : null,
      userAttributes: { locale: builderLocale, urlPath: '/' },
    })

Displaying content
<Content apiKey={key} model="story" content={content} />

6

Took a dive into the sdk-react-native package and found this block of code in

components/content/content.tsx


{TARGET !== "reactNative" ? (
          <ContentStyles
            nonce={props.nonce || ""}
            isNestedRender={props.isNestedRender}
            contentId={builderContextSignal.content?.id}
            cssCode={builderContextSignal.content?.data?.cssCode}
            customFonts={builderContextSignal.content?.data?.customFonts}
          />
        ) : null}

Seems like the customFonts does not being used if the target is React Native.

7

Hey @tobias.akeblom , I am happy to confirm that I was able to reproduce the issue you are experiencing thanks to the details and steps you have provided.

I will now discuss the issue internally in order to determine the next steps. Once I have further updates, I will get back to you.

In the meantime, Please feel free to reach out with any questions or further details you may have.

8

Great news, thanks alot!

9

Hey @tobias.akeblom after looking more into this, it turns out web custom fonts are, impossible in React Native. You need to manually install the font in the react native project, which means it would have to be done entirely by the developers integrating Builder.

Expo offers a way to remotely load web fonts. But this will only work on Expo codebases: expo/packages/expo-font at sdk-51 · expo/expo · GitHub

10

That was what I suspected!

1 Like