react-native-bpk-component-phone-input
Backpack React Native telephone input component.
Installation
npm install react-native-bpk-component-phone-input --save-dev
Data format
Consumers are expected to provide the data that powers the two components available in this package.
Each supported country should be in the following format:
id: 'UK' dialingCode: '+44' name: 'United Kingdom'
All keys are required and should have non-null/empty values.
For BpkDialingCodeList
a list of objects with this format should be used. Sorting should be done beforehand as the component does not perform any sorting itself.
Optionally, you may supply a list of suggested ids which are your best guess at the user's country code. These codes will be shown at the top of the list under a custom title.
BpkDialingCodeList
Usage
;;; const CODES = id: 'DZ' dialingCode: '+213' name: 'Algeria' id: 'CA' dialingCode: '+1' name: 'Canada' id: 'CD' dialingCode: '+243' name: 'Democratic Republic of the Congo' id: 'IT' dialingCode: '+39' name: 'Italy' id: 'JP' dialingCode: '+81' name: 'Japan' id: 'SE' dialingCode: '+46' name: 'Sweden' id: 'GB' dialingCode: '+44' name: 'United Kingdom' ; const FLAG_IMAGES = 'DZ': '/resources/algeria.png' 'CA': '/resources/canada.png' 'CD': '/resources/drcongo.png' 'IT': '/resources/italy.png' 'JP': '/resources/japan.png' 'SE': '/resources/sweden.png' 'GB': '/resources/uk.png'; const SUGGESTED = ids: 'IT' 'GB' // The IDs must match the ones from dialingCodes title: 'Suggested' // The title shown above the suggested codes; { return <BpkDialingCodeList dialingCodes=CODES selectedId="CD" onItemPress= console renderFlag= <Image source= /> suggested=SUGGESTED /> ; }
Usage with search
You can combine the dialing code list with SectionList
's search abilities to allow users to search the dialing code list.
A default filtering function - getFilteredDialingCodes
- is available for you to use. It filters using the dialingCode
and name
properties. You can either use this or provide your own filtering logic if you need advanced functionality.
;;;; const CODES = id: 'DZ' dialingCode: '+213' name: 'Algeria' id: 'CA' dialingCode: '+1' name: 'Canada' id: 'CD' dialingCode: '+243' name: 'Democratic Republic of the Congo' id: 'IT' dialingCode: '+39' name: 'Italy' id: 'JP' dialingCode: '+81' name: 'Japan' id: 'SE' dialingCode: '+46' name: 'Sweden' id: 'GB' dialingCode: '+44' name: 'United Kingdom' ; const FLAG_IMAGES = 'DZ': '/resources/algeria.png' 'CA': '/resources/canada.png' 'CD': '/resources/drcongo.png' 'IT': '/resources/italy.png' 'JP': '/resources/japan.png' 'SE': '/resources/sweden.png' 'GB': '/resources/uk.png'; const SUGGESTED = ids: 'IT' 'GB' // The IDs must match the ones from dialingCodes title: 'Suggested' // The title shown above the suggested codes; { super; thisstate = codes: CODES ; } { const codes = ; this; } { return <BpkDialingCodeList dialingCodes=thisstatecodes selectedId="CD" onItemPress= console renderFlag= <Image source= /> suggested=SUGGESTED ListHeaderComponent= <BpkSectionListSearchField placeholder="Search" onChangeText=thisdoSearch /> ListEmptyComponent= <BpkSectionListNoResultsText>No results</BpkSectionListNoResultsText> /> ; }
Props
Is an instance of React Native's SectionList component so it accepts the same props, as well as the following:
Property | PropType | Required | Default Value |
---|---|---|---|
dialingCodes | arrayOf({id, dialingCode, name}) | true | - |
onItemPress | func | true | - |
renderFlag | func | true | - |
selectedId | string | false | null |
suggested | { ids, title } | false | null |
BpkPhoneNumberInput
Usage
;;; const CODES = id: 'DZ' dialingCode: '+213' name: 'Algeria' ; const FLAG_IMAGES = 'DZ': '/resources/algeria.png'; { return <BpkPhoneNumberInput label="Phone number" value="" dialingCode=CODES0 onDialingCodePress= renderFlag= <Image source= /> /> ; }
Props
Inherits all props from BpkTextInput
except accessoryView
.
Property | PropType | Required | Default Value |
---|---|---|---|
dialingCode | {id, dialingCode, name} | true | - |
onDialingCodePress | func | true | - |
renderFlag | func | true | - |
BpkFlag
Usage
;;; { return <BpkFlag flag=<Image source= /> /> ; }
Props
Inherits all props from View
.
Property | PropType | Required | Default Value |
---|---|---|---|
flag | element | false | null |
width | number | false | spacingLg |