Skip to content

Commit 1504394

Browse files
rililiverililive
authored
Merge pull request #29 from 72days/main
feat: allow for different flag rendering (e.g. to add an icon).
2 parents 0adc421 + 1234028 commit 1504394

File tree

5 files changed

+66
-33
lines changed

5 files changed

+66
-33
lines changed

‎README.md‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,26 @@ render(){
145145
146146
[see full custom library picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomLibraryPicker/app.js)
147147
148+
## Custom Flag component
149+
150+
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.
151+
152+
> 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.
153+
154+
```jsx
155+
<PhoneInput
156+
renderFlag={({ imageSource }) => {
157+
return (
158+
<View>
159+
<Icon name="chevron" />
160+
<Image source={imageSource} width={customWidth} height={customHeight} style={customStyles} />
161+
</View>
162+
)
163+
}}
164+
/>
165+
```
166+
167+
148168
## Custom Countries
149169
150170
```jsx
@@ -155,31 +175,32 @@ render(){
155175
156176
### Properties:
157177
158-
| Property Name | Type | Default | Description |
159-
| ------------------------- | ---------------- | ------------------| ------------------------------------------------------------------------------ |
160-
| autoFormat | boolean | false | Format phone number while typing |
161-
| accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes |
162-
| initialCountry | string | 'us' | initial selected country |
163-
| allowZeroAfterCountryCode | bool | true | allow user input 0 after country code |
164-
| disabled | bool | false | if true, disable all interaction of this component |
165-
| initialValue | string | null | initial phone number |
166-
| style | object | null | custom styles to be applied if supplied |
167-
| flagStyle | object | null | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}} |
168-
| textStyle | object | null | custom styles for phone number text input eg. {{fontSize: 14}} |
169-
| textProps | object | null | properties for phone number text input eg. {{placeholder: 'Telephone number'}} |
170-
| textComponent | function | TextField | the input component to use |
171-
| offset | int | 10 | distance between flag and phone number |
172-
| pickerButtonColor | string | '#007AFF' | set button color of country picker |
173-
| pickerBackgroundColor | string | 'white' | set background color of country picker |
174-
| pickerItemStyle | object | null | custom styles for text in country picker eg. {{fontSize: 14}} |
175-
| cancelText | string | 'Cancel' | cancel word |
176-
| confirmText | string | 'Confirm' | confirm word |
177-
| cancelTextStyle | object | null | custom styles for country picker cancel button |
178-
| confirmTextStyle | object | null | custom styles for country picker confirm button |
179-
| onChangePhoneNumber | function(number) | null | function to be invoked when phone number is changed |
180-
| onSelectCountry | function(iso2) | null | function to be invoked when country picker is selected |
181-
| onPressFlag | function() | null | function to be invoked when press on flag image |
182-
| countriesList | array | null | custom countries list |
178+
| Property Name | Type | Default | Description |
179+
| ------------------------- | ------------------------- | ------------------| ------------------------------------------------------------------------------ |
180+
| autoFormat | boolean | false | Format phone number while typing |
181+
| accessibilityLabel | string | 'Telephone input' | Label for accessibility purposes |
182+
| initialCountry | string | 'us' | initial selected country |
183+
| allowZeroAfterCountryCode | bool | true | allow user input 0 after country code |
184+
| disabled | bool | false | if true, disable all interaction of this component |
185+
| initialValue | string | null | initial phone number |
186+
| style | object | null | custom styles to be applied if supplied |
187+
| flagStyle | object | null | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}} |
188+
| textStyle | object | null | custom styles for phone number text input eg. {{fontSize: 14}} |
189+
| textProps | object | null | properties for phone number text input eg. {{placeholder: 'Telephone number'}} |
190+
| textComponent | function | TextField | the input component to use |
191+
| offset | int | 10 | distance between flag and phone number |
192+
| pickerButtonColor | string | '#007AFF' | set button color of country picker |
193+
| pickerBackgroundColor | string | 'white' | set background color of country picker |
194+
| pickerItemStyle | object | null | custom styles for text in country picker eg. {{fontSize: 14}} |
195+
| cancelText | string | 'Cancel' | cancel word |
196+
| confirmText | string | 'Confirm' | confirm word |
197+
| cancelTextStyle | object | null | custom styles for country picker cancel button |
198+
| confirmTextStyle | object | null | custom styles for country picker confirm button |
199+
| onChangePhoneNumber | function(number) | null | function to be invoked when phone number is changed |
200+
| onSelectCountry | function(iso2) | null | function to be invoked when country picker is selected |
201+
| onPressFlag | function() | null | function to be invoked when press on flag image |
202+
| renderFlag | function({ imageSource }) | null | custom render function for the flag component, passed an image src |
203+
| countriesList | array | null | custom countries list |
183204
184205
### Functions:
185206

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-phone-input",
3-
"version": "1.2.2",
3+
"version": "1.3.0",
44
"description": "Phone input box for React Native",
55
"main": "dist/index.js",
66
"scripts": {

‎src/PhoneInput.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -229,11 +229,19 @@ export default class PhoneInput<TextComponentType extends React.ComponentType =
229229
accessibilityRole="imagebutton"
230230
accessibilityLabel={country ? country.name : iso2}
231231
>
232-
<Image
233-
accessibilityIgnoresInvertColors={true}
234-
source={Flags.get(iso2)}
235-
style={[styles.flag, this.props.flagStyle]}
236-
/>
232+
{this.props.renderFlag ? (
233+
<>
234+
{this.props.renderFlag({
235+
imageSource: Flags.get(iso2),
236+
})}
237+
</>
238+
) : (
239+
<Image
240+
accessibilityIgnoresInvertColors={true}
241+
source={Flags.get(iso2)}
242+
style={[styles.flag, this.props.flagStyle]}
243+
/>
244+
)}
237245
</TouchableOpacity>
238246
<View style={{ flex: 1, marginLeft: this.props.offset || 10 }}>
239247
<TextComponent

‎src/typings/index.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,10 @@ export interface ReactNativePhoneInputProps<TextComponentType extends React.Comp
158158
* Function to be invoked when confirming country picker selection
159159
*/
160160
onPressConfirm?: () => void;
161+
/**
162+
* Render function to replace the default flag
163+
*/
164+
renderFlag?: ({ imageSource }: { imageSource: number }) => Element;
161165
}
162166

163167
export default class ReactNativePhoneInput<

0 commit comments

Comments
 (0)