RFC: Font Provider

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

[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

[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!