Customising font family throughout the design system

[mtimofiiv]

This comes from akveo/react-native-ui-kitten#569

I think you have a very nice looking and functioning design system. But the one thing in terms of styling I find lacking is the ability to set a font family, specifically in the React-Native part of it.

There's an issue now open there (linked above) but @artyorsh suggested it also get opened here as well!

The nice thing that react-native-elements does is that they allow you to use their ThemeProvider to overwrite individual styles for each of their components.

So you could have something like this:

import config from './config'

export default {
  colors: {
    primary: config.colors.brand
  },

  Text: {
    style: {
      fontFamily: config.fontFamilyRegular
    }
  },

  Button: {
    titleStyle: {
      fontFamily: config.fontFamilyBold,
      top: -1
    }
  },

  Input: {
    containerStyle: {
      marginTop: 15
    },

    labelStyle: {
      fontFamily: config.fontFamilyRegular,
      fontSize: 12
    },

    inputStyle: {
      fontFamily: config.fontFamilyRegular
    }
  },

  ListItem: {
    subtitleStyle: {
      color: config.colors.faded
    }
  },

  Card: {
    containerStyle: {
      backgroundColor: 'transparent',
      borderWidth: 0,
      borderColor: 'transparent'
    }
  }
}