Font styles not being applied (or, I'm doing it wrong :D)

[mocon]

Hey there, thank you for this awesome library! We are using it and it's great.

I'm having one issue though, while trying to change the fontFamily of the text portions of the <PINCode />:

const primaryFont = 'Avenir-Book';
const fontWeight = '400';

<PINCode
  colorPassword={CommonUtils.uiColors.success}
  numbersButtonOverlayColor={CommonUtils.uiColors.success}
  styleMainContainer={{
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }}
  styleLockScreenText={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  styleLockScreenTextButton={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  styleLockScreenTextTimer={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeViewTitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextButtonCircle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextTitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextSubtitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  storedPin={this.props.pin}
  maxAttempts={3}
  textButtonLockedPage="Log In with email/password"
/>

None of these seem to be taking effect, am I doing this incorrectly? Thank you!

[jeremy-farnault]

Hi :).

Thanks for the feedback.
I tried to reproduce your bug but managed to change the font.
I tried using a bold font and a font size:

        <PINCode
          status={'enter'}
          colorPassword={colors.valid}
          numbersButtonOverlayColor={colors.valid}
          styleMainContainer={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
          stylePinCodeTextTitle={{
            fontFamily: 'Roboto-Bold',
            fontSize: 20
          }}
          storedPin={'1234'}
          maxAttempts={3}
          textButtonLockedPage="Log In with email/password"
        />

and a font weight:

        <PINCode
          status={'enter'}
          colorPassword={colors.valid}
          numbersButtonOverlayColor={colors.valid}
          styleMainContainer={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
          stylePinCodeTextTitle={{
            fontFamily: 'courier',
            fontWeight: '800'
          }}
          storedPin={'1234'}
          maxAttempts={3}
          textButtonLockedPage="Log In with email/password"
        />

and both worked.
If you're using a font with fixed weight (like the roboto one I'm using), trying to change the weight won't do anything. Maybe it can be related to your issue?

If not, I really don't know what to do...I'll try testing again with different fonts.

Cheers :)