diff --git a/lib/countryPicker.js b/lib/countryPicker.js index 1879ebee..9b25e339 100644 --- a/lib/countryPicker.js +++ b/lib/countryPicker.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Text, TouchableOpacity, View, Modal, Picker } from 'react-native'; +import { Text, TouchableOpacity, View, Modal } from 'react-native'; +import {Picker} from '@react-native-community/picker'; import PropTypes from 'prop-types'; import Country from './country'; diff --git a/lib/index.js b/lib/index.js index db864957..f919c158 100644 --- a/lib/index.js +++ b/lib/index.js @@ -46,7 +46,9 @@ export default class PhoneInput extends Component { componentDidUpdate() { const { value, disabled } = this.props; - this.setState({ disabled }); + if (disabled != null && disabled !== this.state.disabled) { + this.setState({disabled}); + } if (value && value !== this.state.value) { this.setState({ value }); @@ -183,16 +185,18 @@ export default class PhoneInput extends Component { const TextComponent = this.props.textComponent || TextInput; return ( - - - + disabled={disabled} + > + + + )} { @@ -211,23 +215,25 @@ export default class PhoneInput extends Component { /> - { - this.picker = ref; - }} - selectedCountry={iso2} - onSubmit={this.selectCountry} - buttonColor={this.props.pickerButtonColor} - buttonTextStyle={this.props.pickerButtonTextStyle} - cancelText={this.props.cancelText} - cancelTextStyle={this.props.cancelTextStyle} - confirmText={this.props.confirmText} - confirmTextStyle={this.props.confirmTextStyle} - pickerBackgroundColor={this.props.pickerBackgroundColor} - itemStyle={this.props.pickerItemStyle} - onPressCancel={this.props.onPressCancel} - onPressConfirm={this.props.onPressConfirm} - /> + {this.props.shouldShowCountryPicker && ( + { + this.picker = ref; + }} + selectedCountry={iso2} + onSubmit={this.selectCountry} + buttonColor={this.props.pickerButtonColor} + buttonTextStyle={this.props.pickerButtonTextStyle} + cancelText={this.props.cancelText} + cancelTextStyle={this.props.cancelTextStyle} + confirmText={this.props.confirmText} + confirmTextStyle={this.props.confirmTextStyle} + pickerBackgroundColor={this.props.pickerBackgroundColor} + itemStyle={this.props.pickerItemStyle} + onPressCancel={this.props.onPressCancel} + onPressConfirm={this.props.onPressConfirm} + /> + )} ); } @@ -265,11 +271,13 @@ PhoneInput.propTypes = { confirmText: PropTypes.string, confirmTextTextStyle: styleType, disabled: PropTypes.bool, - allowZeroAfterCountryCode: PropTypes.bool + allowZeroAfterCountryCode: PropTypes.bool, + shouldShowCountryPicker: PropTypes.bool }; PhoneInput.defaultProps = { initialCountry: "us", disabled: false, - allowZeroAfterCountryCode: true + allowZeroAfterCountryCode: true, + shouldShowCountryPicker: true }; diff --git a/package.json b/package.json index ab4450df..a6fe2c51 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "dependencies": { "google-libphonenumber": "^3.2.2", "lodash": "^4.17.4", - "prop-types": "^15.5.10" + "prop-types": "^15.5.10", + "@react-native-community/picker": "^1.6.5" }, "peerDependencies": { "react-native": ">= 0.25"