Struggling to incorporate this custom picker from React Native Phone Input repository into a TypeScript project. Being new to react native, I'm not sure if I set up my ref correctly, but here's what I have so far.
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';
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() {
console.log(this.phoneInputRef);
}
selectCountry(country:IRegisterScreenState) {
if(this.phoneInputRef)
this.phoneInputRef.selectCountry(country.cca2.toLowerCase());
}
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,
},
});
Encountering an error on
this.phoneInputRef.selectCountry(country.cca2.toLowerCase());this.setState({pickerData: this.phoneInputRef.getPickerData()});Property 'selectCountry' does not exist on type 'RefObject<ReactNativePhoneInput<typeof TextInput>>'
The types for 'react-native-phone-input' were installed, and upon inspection of the codebase, it was found that the functions are indeed implemented. How is this discrepancy possible? The relevant file has been attached below.
// 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>;
// Definition continues...