Skip to content

Commit

Permalink
Merge pull request #29 from 72days/main
Browse files Browse the repository at this point in the history 
feat: allow for different flag rendering (e.g. to add an icon).
  • Loading branch information
@rililive
rililive authored Nov 25, 2021
2 parents 0adc421 + 1234028 commit 1504394
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 33 deletions.
71 changes: 46 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,26 @@ render(){
[see full custom library picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomLibraryPicker/app.js)
## Custom Flag component
If you need to change how the flag is rendered, you can use the `renderFlag` property. This function is passed the flag image source as a named `imageSource` argument.
> Note: if you just need custom styles for the flag image, you can pass the `flagStyle` prop, only use `renderFlag` if you need to change what components are actually rendered within the touchable area of the flag.
```jsx
<PhoneInput
renderFlag={({ imageSource }) => {
return (
<View>
<Icon name="chevron" />
<Image source={imageSource} width={customWidth} height={customHeight} style={customStyles} />
</View>
)
}}
/>
```
## Custom Countries
```jsx
Expand All @@ -155,31 +175,32 @@ render(){
### Properties:
| Property Name | Type | Default | Description |
| ------------------------- | ---------------- | ------------------| ------------------------------------------------------------------------------ |
| autoFormat | boolean | false | Format phone number while typing |
| accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes |
| initialCountry | string | 'us' | initial selected country |
| allowZeroAfterCountryCode | bool | true | allow user input 0 after country code |
| disabled | bool | false | if true, disable all interaction of this component |
| initialValue | string | null | initial phone number |
| style | object | null | custom styles to be applied if supplied |
| flagStyle | object | null | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}} |
| textStyle | object | null | custom styles for phone number text input eg. {{fontSize: 14}} |
| textProps | object | null | properties for phone number text input eg. {{placeholder: 'Telephone number'}} |
| textComponent | function | TextField | the input component to use |
| offset | int | 10 | distance between flag and phone number |
| pickerButtonColor | string | '#007AFF' | set button color of country picker |
| pickerBackgroundColor | string | 'white' | set background color of country picker |
| pickerItemStyle | object | null | custom styles for text in country picker eg. {{fontSize: 14}} |
| cancelText | string | 'Cancel' | cancel word |
| confirmText | string | 'Confirm' | confirm word |
| cancelTextStyle | object | null | custom styles for country picker cancel button |
| confirmTextStyle | object | null | custom styles for country picker confirm button |
| onChangePhoneNumber | function(number) | null | function to be invoked when phone number is changed |
| onSelectCountry | function(iso2) | null | function to be invoked when country picker is selected |
| onPressFlag | function() | null | function to be invoked when press on flag image |
| countriesList | array | null | custom countries list |
| Property Name | Type | Default | Description |
| ------------------------- | ------------------------- | ------------------| ------------------------------------------------------------------------------ |
| autoFormat | boolean | false | Format phone number while typing |
| accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes |
| initialCountry | string | 'us' | initial selected country |
| allowZeroAfterCountryCode | bool | true | allow user input 0 after country code |
| disabled | bool | false | if true, disable all interaction of this component |
| initialValue | string | null | initial phone number |
| style | object | null | custom styles to be applied if supplied |
| flagStyle | object | null | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}} |
| textStyle | object | null | custom styles for phone number text input eg. {{fontSize: 14}} |
| textProps | object | null | properties for phone number text input eg. {{placeholder: 'Telephone number'}} |
| textComponent | function | TextField | the input component to use |
| offset | int | 10 | distance between flag and phone number |
| pickerButtonColor | string | '#007AFF' | set button color of country picker |
| pickerBackgroundColor | string | 'white' | set background color of country picker |
| pickerItemStyle | object | null | custom styles for text in country picker eg. {{fontSize: 14}} |
| cancelText | string | 'Cancel' | cancel word |
| confirmText | string | 'Confirm' | confirm word |
| cancelTextStyle | object | null | custom styles for country picker cancel button |
| confirmTextStyle | object | null | custom styles for country picker confirm button |
| onChangePhoneNumber | function(number) | null | function to be invoked when phone number is changed |
| onSelectCountry | function(iso2) | null | function to be invoked when country picker is selected |
| onPressFlag | function() | null | function to be invoked when press on flag image |
| renderFlag | function({ imageSource }) | null | custom render function for the flag component, passed an image src |
| countriesList | array | null | custom countries list |
### Functions:
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-phone-input",
"version": "1.2.2",
"version": "1.3.0",
"description": "Phone input box for React Native",
"main": "dist/index.js",
"scripts": {
Expand Down
18 changes: 13 additions & 5 deletions src/PhoneInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,11 +229,19 @@ export default class PhoneInput<TextComponentType extends React.ComponentType =
accessibilityRole="imagebutton"
accessibilityLabel={country ? country.name : iso2}
>
<Image
accessibilityIgnoresInvertColors={true}
source={Flags.get(iso2)}
style={[styles.flag, this.props.flagStyle]}
/>
{this.props.renderFlag ? (
<>
{this.props.renderFlag({
imageSource: Flags.get(iso2),
})}
</>
) : (
<Image
accessibilityIgnoresInvertColors={true}
source={Flags.get(iso2)}
style={[styles.flag, this.props.flagStyle]}
/>
)}
</TouchableOpacity>
<View style={{ flex: 1, marginLeft: this.props.offset || 10 }}>
<TextComponent
Expand Down
4 changes: 4 additions & 0 deletions src/typings/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,10 @@ export interface ReactNativePhoneInputProps<TextComponentType extends React.Comp
* Function to be invoked when confirming country picker selection
*/
onPressConfirm?: () => void;
/**
* Render function to replace the default flag
*/
renderFlag?: ({ imageSource }: { imageSource: number }) => Element;
}

export default class ReactNativePhoneInput<
Expand Down

0 comments on commit 1504394

Please sign in to comment.