search

halilb / react-native-textinput-effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
MIT License
2.99k stars 293 forks source link

Fonts referenced in templates #58

Closed chongdog83 closed 7 years ago

chongdog83 commented 7 years ago

Got a font family error when I used the Madoka template.

When I removed fontFamily: 'Arial', from /lib/Madoka.js, it uses my default font and no error.

label: { backgroundColor: 'transparent', fontFamily: 'Arial', fontWeight: 'bold', color: '#6a7989', },

johanbuys commented 7 years ago

Hi, had the same issue.

You can override the labelStyles like so

labelStyle={{ fontFamily: 'LiberationSans-Regular', }} Here LiberationSans-Regular is loaded as a custom font by my app. It is an alternative to Arial, use any custom font you want.

Hope this helps.

halilb commented 7 years ago

@johanbuys is right. It should work when you use a fontFamily in labelStyle prop.

I tested and can confirm this works on iOS:

 <Madoka
    style={styles.input}
    label={'Frequency'}
    borderColor={'#aee2c9'}
    labelStyle={{ color: '#008445' }}
    inputStyle={{
      color: '#f4a197',
      fontFamily: 'AmericanTypewriter-CondensedBold',
    }}
/>

Let me know if you still have a problem with this.