Feature: Toggle English alphabet appearing on PIN pad

[omorkved]

New feature: Toggle English alphabet on PIN Pad

Often, implementations of PINs need a PIN pad that includes letters below the numbers (for example, Apple's unlock screen). For the app I am developing, I wanted letters on the PIN pads. I thought others might want it as well.

This PR introduces two props to toggle hiding/showing the letters, and toggling the style of the letters:

Key	Description	Default	Required	Type
alphabetCharsVisible	Boolean to hide/show English alphabet on PIN panel	false	false	boolean

Note how the default for alphabetCharsVisible is false, so this PR will not break the layout of anyone's current implementation. Developers can easily switch this on by adding alphabetCharsVisible={true} to the PinCode.

Key	Description	Default	Type
styleAlphabet	Text of English letters on PIN panel. (First, set alphabetCharsVisible={true})	fontSize: grid.unit/2, fontWeight: "300"	StyleProp<TextStyle>

Developers can easily toggle styleAlphabet the same way they do with styleTextTitle or any other StyleProp<TextStyle> prop, in order to change font weight, size, color, etc. (Example: styleAlphabet={{fontWeight: '400', fontSize: 12}} )

Finally, this PR is only frontend, and does not in any way affect how the PIN is stored -- ie, it is still stored as numbers only.

Some samples:

Compare with the alphabetic layout on Apple's screen, which was the inspiration:

Note: Internally, this PR adds a map called alphanumericMap to PinCode.tsx. Currently, the alphanumericMaps uses the mapping found on Apple's unlock screen (ie 1 maps to nothing, 2 maps to ABC ... 9 maps to WXYZ) .

Some English PIN pads instead set (1 = QZ, 2 ABC, ... 9 WXY). I choose not to implement this because I think the latter is less common on mobile layouts, and really only used for physical PIN pads. This could be a future PR to support multiple PIN layouts or to add a Prop that allows developers to create their own mapping.

[jeremy-farnault]

Sorry for the delay and thanks for that! :)