RFC: Font Provider

[iRoachie]

Motivation

Right now for those using Expo, they have to manually add the fonts required for React Native Elements using Expo's Font.loadAsync. Without doing this, the app will crash with a red screen seen in #1005. This is pretty bad DX(developer experience) especially for newcomers who would have no idea how to implement this without searching through issues.

Proposed Solution

In v1.0.0-beta7 we introduced the ThemeProvider, which was a top-level component that surrounds your entire app. I think this is the perfect place to set up and load the fonts required by React Native Elements and maybe even allow users to register their own custom fonts as well. With that, we could probably rename it to ElementsProvider since it would now do more than just theming.

Possible API

API subject to change:

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { ElementsProvider } from 'react-native-elements';

///

const App = () => <Text>My App is Cool</Text>;

const ErrorComponent = () => (
  <View>
    <Text>A Big Error</Text>
  </View>
);

const AppRoot = () => (
  <ElementsProvider
    fonts={[
      'font-awesome',
      'material',
      { Montserrat: require('./assets/fonts/Montserrat.ttf') },
    ]}
    LoadingComponent={<ActivityIndicator />}
    ErrorComponent={<ErrorComponent />}
  >
    <App />
  </ElementsProvider>
);

export default AppRoot;

Possible discussion

• API should allow users to provide a custom component that's rendered while fonts are loading (since it's async) as well as if there are any errors. See https://twitter.com/roach_iam/status/1065265419118882816
• Should it load all the fonts? Or should users specify which? Does loading extra fonts have an impact on bundle size?
• This change should not affect regular react-native-cli users, it's strictly for expo user.
• Animating between loading, error, done states

[janhesters]

I'm one of the cli-user and my only wish is that RNE stays smooth for us 👍

[iRoachie]

Hey @piu130 could you let me know if something like this would affect RNW and how?

[piu130]

@iRoachie What exactly do you mean by affect? Here some thoughts:

I don't know how to get expo working with RNW (Switched to cli long ago, maybe with expo-web).

For cli-user it depends on the used loader. You can load fonts inline, which would increase the bundle size, because you load all fonts, or async, which would load them when specific font-family is needed.

I think it depends on the implementation of the Font Provider, the bundler and its font-loader but since it only affects expo users, RNW should also not be affected.

Currently, RNW users must load the fonts manually like:

const getFontTag = (fontName) => {
  const style = document.createElement('style')

  const fontUrl = require(`react-native-vector-icons/Fonts/${fontName}.ttf`)
  const fontStyles = `@font-face {
    src: url(${fontUrl});
    font-family: '${fontName}';
  }`
  style.type = 'text/css'
  style.appendChild(document.createTextNode(fontStyles))

  return style
}

// loads font async, because the url refers a file
document.head.appendChild(getFontTag('MaterialIcons'))

[horacioh]

API should allow users to provide a custom component that's rendered while fonts are loading (since it's async) as well as if there are any errors. See https://twitter.com/roach_iam/status/1065265419118882816

agree!

Should it load all the fonts? Or should users specify which? Does loading extra fonts have an impact on bundle size?

I don't think it should load all the fonts, dunno how much fonts are you talking about but its better not to overload the users bundle for no reason.

This change should not affect regular react-native-cli users, it's strictly for expo user.

maybe make sure the user understand that this component is useful in the Expo environment.

Animating between loading, error, done states

yes if we just let the user to choose from a set of options. maybe the most general ones like fade out, slide out...

---

some questions:

• is there other things a user want to pre-load like the fonts? if the answer is no, then I think it would be better to create a new component instead of mixin both the Theme and Fonts. but this is just in the case that there are not other things a user would like to preload.
• how this is handled in native mobile apps? is there some ideas we can get from that implementation?

[iRoachie]

Also we have one more use case that we should tackle with this.

Right now out get-icon-type helper includes all icons from react native vector icons(rnvi).

That means that when new versions come out that include new icon sets, we force users to update to that version even if they’re not using the icons.

[horacioh]

@iRoachie ok yes, maybe its a good idea to centralize all this imports in this new Provider.

is there a way to dynamically load just the vectorIcons the user wants to load? If we still need to import all the icons I don't think this will help not importing them all :S

The idea of having a common provider seems to me a good option now, but I think it will turn into the "provider for everything" and will over-complicate things. hope this helps!

[iRoachie]

Yes! I think that should be the objective, only load the fonts the user needs. Maybe we should load Material Icons by default since it's needed for SearchBar and other components. But all the others can be optional