Add Support for custom fonts in composition of React Native component.

[yarahemant]

Description

I build my own Text Component in React Native and exported over bit.dev harmony and I added composition as well but I am using Noto Sans font in my own Text Component and I want the same font should be visible in composition of Text component as well but it is showing some default font over composition over bit.dev
So could you guys suggest something how can i add my own font in my own React Native components over composition.

Specifications

• Bit version: 0.0.435
• Node version: v14.11.0
• npm / yarn version: 7.16.0
• Platform: React Native

[toticuervo-tandem]

I agree

[KutnerUri]

Seems related to #4693, #4805, I am investigating

[KutnerUri]

@toticuervo-tandem - I just upgraded Webpack and others in #4842. It seems to be working now, can you check?

[toticuervo-tandem]

@toticuervo-tandem - I just upgraded Webpack and others in #4842. It seems to be working now, can you check?

OP is @KutnerUri

[KutnerUri]

sorry. @yarahemant - can you check?

[kapildeyyara2]

@KutnerUri the fonts do not seem to match with that of Figma.

current (used) bvm version: 0.0.26
current (used) bit version: 0.0.507

Replying on behalf of @yarahemant

[smn-snkl]

@kapildeyyara2 did you find a solution? We're following the same approach with a custom Text component that uses a custom font. But on Bit it always defaults back to some standard font.

[h3nk42]

would love to find a solution to this problem!

[KutnerUri]

How are you trying to apply the fonts?

Webpack is supposed to pick up fonts from <Link ...> and css links like @font-face, but ReactNative is using a js object called Stylesheet, which doesn't allow them.
It seems React Native is expecting a react-native.config.js file, but I don't see it in our React Native env. This file is also a global definition file which is bad for components. Hmm.

Maybe, for compositions, you can create a regular css font component (and add it to your env providers), and then add the fonts to the react-native.config.js file in your consuming app? Does that make sense?

[h3nk42]

The config file is only being used for the ‘react-native link’ command which copies the assets into the native ios/android folders.

when developing a react native app we still have to build a unique android app as well as a unique ios app. During this building process our React files are getting transformed into native android/ios code so the apps work native on devices. During this process iOS and Android take the fonts that are placed in the native directories and bundle them into the app. After bundling the files into the app the transformed React Project has access to those fonts.
I think youre using react-native-web under the hood. So the question is how can we bundle Fonts, where do we place them, so they end up in the react-native-web build version you are showing in bit compositions.

I think when using react-native-web there has to be an index.html file, the question is if you link the fonts in that html file do they actually end up being reachable by the react-native components

[h3nk42]

necolas/react-native-web#2176 (comment)

It seems possible to load fonts like we need with expo. But expo needs native changes which you can see here:
https://docs.expo.dev/bare/installing-expo-modules/

When installing expo in a bit workspace and trying to use it bit throws following error in component docs / composition:

[JoshK2]

If I understand correctly you have a font in the app globally and you want to see it on your component compositions.
So I think it can be solved with a Theme component that loads the required font and then add it to all the compositions via the Env provider.
To do this you need to create a custom Env and extend the provider to use your Theme.
I'll make an example of this so we'll see if this approach is working as expected.

[JoshK2]

Update, currently the react-native env doesn’t support registerProvider and this is needed to make the example.
So currently I'm adding the support to the react-native env.

[h3nk42]

@JoshK2 Thanks for working out the example! What do you think is the timeline on this ? probably after new years ?

[KutnerUri]

@JoshK2 - Now that I think about it, it might be possible to just import the css/fonts from the *.preview.runtime.ts(x) directly, without using registerProvider, like:

// your-env.preview.runtime.ts
import './global-fonts.css'

/* global-fonts.css */
@font-face {
  font-family: "FontName";
  src: url("./assets/lineto-circular-bookitalic.woff2") format("woff2"); /* etc */
}

We still need to support providers in React Native, but this should tell Webpack to bundle the font and make it available.

[JoshK2]

@h3nk42 the example is working and I'll publish it soon to a public repo.
And I also added new APIs to the react-native env, I'll post the PR here when it be ready.

[JoshK2]

The PR is almost ready!
#5174

The demo is working too, I'll send it after the PR above will be merged because you need the changes to do the same as I did.

[JoshK2]

The PR was merged, so after the next release, I'll publish the demo workspace.

[JoshK2]

I'm happy to share that a version including my changes is now available.
Run bvm install 0.0.603 to install the new version.
Check out my PR here to see what's new:
#5174

And here is a demo project that demonstrates the support for custom fonts in React Native compositions.
https://github.com/bit-demos/react-native-custom-fonts-in-compositions

[smn-snkl]

Thanks @JoshK2 for the amazing work to make custom fonts work with Bit!

@JoshK2 just in case someone else needs a guide for how to set this up, this approach is correct right?

1. Run bvm install to get the latest version
2. Run bit create react-native-env envs/custom-react-native to create a custom extension of the react-native env
3. Define the new custom env as aspect in the workspace.jsonc:

"teambit.workspace/variants": {
  // ...
  "envs/custom-react-native": {
        "teambit.harmony/aspect": {}
  },
}

4. Use the new env for the react-native components / scope:

"teambit.workspace/variants": {
  // ...
  "ui-lib": {
    "envs/custom-react-native": {},
  }
}

5. Add a new theme-compositions directory containing the custom fonts (.ttf) and .css file etc. to the new custom environment component as seen here
6. Add the new ThemeComposition to the custom-react-native.preview.runtime.ts like this:

...
  static async provider([reactNative]: [ReactNativePreview]) {
    const customReactNativePreviewMain = new CustomReactNativePreviewMain();
    reactNative.registerProvider([ThemeCompositions]); // NEW LINE
    // ...
  }
...

7. Verify the components from ui-lib are using the new env with bit env
8. Compiled and (re-)started the local Bit dev server

Thanks a lot again, this is awesome!

[JoshK2]

@smn-snkl perfect!
just change bvm install to bvm upgrade