I am trying to implement this https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomPicker/app.js with typescript but it has proven rather difficult. I also just started out with react native so I don't know if I made my ref correctly but this is what I currently have.
import * as React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {Button} from 'react-native-elements';
import PhoneInput from 'react-native-phone-input';
import ReactNativePhoneInput from 'react-native-phone-input';
// import CountryPicker from 'react-native-country-picker-modal';
export interface IRegisterScreenProps {
}
export interface IRegisterScreenState{
cca2? : string;
pickerData? : string;
}
export default class RegisterScreen extends React.Component<IRegisterScreenProps, IRegisterScreenState> {
private phoneInputRef = React.createRef<ReactNativePhoneInput>();
constructor(props:IRegisterScreenProps) {
super(props);
this.onPressFlag = this.onPressFlag.bind(this);
this.selectCountry = this.selectCountry.bind(this);
this.submitPhoneNumber = this.submitPhoneNumber.bind(this);
this.state = {
cca2: 'US',
};
}
componentDidMount() {
if (this.phoneInputRef)
this.setState({pickerData: this.phoneInputRef.getPickerData()});
}
onPressFlag() {
// this.countryPicker.openModal();
console.log(this.phoneInputRef);
}
selectCountry(country:IRegisterScreenState) {
if(this.phoneInputRef)
this.phoneInputRef.selectCountry(country.cca2.toLowerCase());
// this.setState({ cca2: country.cca2 });
}
public render(): JSX.Element
{
return (
<View style={styles.container}>
<Text style={styles.title}>Tempp</Text>
<PhoneInput ref={this.phoneInputRef} onPressFlag={this.onPressFlag}/>
<Button title="Submit" onPress={this.submitPhoneNumber} containerStyle={styles.submitButton} />
</View>
);
}
private submitPhoneNumber() : void
{
console.log(this.phoneInputRef);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 50,
margin: 30,
},
phoneNumberInput:{
width: 300,
},
submitButton:{
width: 150,
margin: 25,
},
});
But it throws an error on this.phoneInputRef.selectCountry(country.cca2.toLowerCase()); and this.setState({pickerData: this.phoneInputRef.getPickerData()}); saying
Property 'selectCountry' does not exist on type 'RefObject<ReactNativePhoneInput<typeof TextInput>>'I installed the types for react-native-phone-input and I navigated to the object and saw that it did implement it. How is this possible? I added the file I navigated to.
// Type definitions for react-native-phone-input 0.2
// Project: https://github.com/thegamenicorus/react-native-phone-input
// Definitions by: Matthew Elphick <https://github.com/maael>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.9
import * as React from 'react';
import { StyleProp, ViewStyle as ViewStyleRaw, TextStyle as TextStyleRaw, TextInput, ImageRequireSource } from 'react-native';
export type ViewStyle = StyleProp<ViewStyleRaw>;
export type TextStyle = StyleProp<TextStyleRaw>;
export interface CountriesListItem {
name: string;
iso2: string;
dialCode: string;
priority: number;
areaCodes: ReadonlyArray<string> | null;
}
export interface PickerData {
key: number;
image: ImageRequireSource;
label: CountriesListItem['name'];
dialCode: CountriesListItem['dialCode'];
iso2: CountriesListItem['iso2'];
}
export interface ReactNativePhoneInputProps<TextComponentType extends React.ComponentType = typeof TextInput> {
/**
* Initial selected country
*/
initialCountry?: string;
/**
* Allow user input 0 after country code
*/
allowZeroAfterCountryCode?: boolean;
/**
* If true, disable all interaction of this component
*/
disabled?: boolean;
/**
* Initial phone number
*/
value?: string;
/**
* Custom styles to be applied if supplied
*/
style?: ViewStyle;
/**
* Custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}
*/
flagStyle?: ViewStyle;
/**
* Custom styles for phone number text input eg. {{fontSize: 14}}
*/
textStyle?: TextStyle;
/**
* Properties for phone number text input eg. {{placeholder: 'Telephone number'}}
*/
textProps?: React.ComponentProps<TextComponentType>;
/**
* The input component to use
*/
textComponent?: TextComponentType;
/**
* Distance between flag and phone number
*/
offset?: number;
/**
* Set button color of country picker
*/
pickerButtonColor?: string;
/**
* Set background color of country picker
*/
pickerBackgroundColor?: string;
/**
* Custom styles for text in country picker eg. {{fontSize: 14}}
*/
pickerItemStyle?: ViewStyle;
/**
* Cancel word
*/
cancelText?: string;
/**
* Confirm word
*/
confirmText?: string;
/**
* Custom styles for country picker button
*/
buttonTextStyle?: TextStyle;
/**
* Function to be invoked when phone number is changed
*/
onChangePhoneNumber?: (number: number) => void;
/**
* Function to be invoked when country picker is selected
*/
onSelectCountry?: (iso2: string) => void;
/**
* Function to be invoked when press on flag image
*/
onPressFlag?: () => void;
/**
* Custom countries list
*/
countriesList?: ReadonlyArray<CountriesListItem>;
/**
* Function to be invoked when cancelling country picker selection
*/
onPressCancel?: () => void;
/**
* Function to be invoked when confirming country picker selection
*/
onPressConfirm?: () => void;
}
export default class ReactNativePhoneInput<
TextComponentType extends React.ComponentType = typeof TextInput
> extends React.Component<ReactNativePhoneInputProps<TextComponentType>> {
picker?: React.Ref<ThisType<ReactNativePhoneInput>>;
/**
* Return true if current phone number is valid
*/
isValidNumber: () => boolean;
/**
* Return true type of current phone number
*/
getNumberType: () => string;
/**
* Return current phone number
*/
getValue: () => string;
/**
* Return flag image
*/
getFlag: (iso2: string) => ImageRequireSource;
/**
* Return country object in country picker
*/
getAllCountries: () => CountriesListItem;
/**
* Return country object with flag image
*/
getPickerData: () => PickerData;
/**
* Focus the phone input
*/
focus: () => void;
/**
* Blur the phone input
*/
blur: () => void;
/**
* Set phone input to specific country
*/
selectCountry: (iso2: string) => void;
/**
* Return country dial code of current phone number
*/
getCountryCode: () => string;
/**
* Return country iso code of current phone number
*/
getISOCode: () => string;
}
