Recently, I've embarked on my journey with React Native and decided to incorporate TypeScript into my development process. As I attempted to set my state, an error popped up that reads as follows:
An issue arose while trying to assign the argument '{ pickerData: PickerData; }' to a parameter of type 'IRegisterScreenState | ((prevState: Readonly<IRegisterScreenState>, props: Readonly<IRegisterScreenProps>) => IRegisterScreenState | Pick<...>) | Pick<...>'.
The type '{ pickerData: PickerData; }' was found incompatible with type 'Pick<IRegisterScreenState, "pickerData">'.
Upon comparison, it seems the property 'pickerData' poses some compatibility issues.
Specifically, the type 'PickerData' lacks several required properties from type 'ReactNativePhoneInput<typeof TextInput>': isValidNumber, getNumberType, getValue, getFlag, along with other essential attributes.
To resolve this dilemma, I scoured for ways to set states using TypeScript and stumbled upon a resource at https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native#adding-a-component. In this guide, they introduced interfaces State and Props. This made me ponder if crafting my interface for the component is allowed, similar to what others have done with IState and IProps. Failing which, pinning down the root cause of the error might prove challenging. It appears that the error stems from the line
this.setState({pickerData: this.phoneInputRef.current.getPickerData()});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 PickerData from 'react-native-phone-input';
// import CountryPicker from 'react-native-country-picker-modal';
export interface IRegisterScreenProps {
}
export interface IRegisterScreenState{
cca2? : string;
pickerData? : PickerData;
}
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.current)
this.setState({pickerData: this.phoneInputRef.current.getPickerData()});
}
onPressFlag() {
// this.countryPicker.openModal();
console.log(this.phoneInputRef.current);
}
selectCountry(country:IRegisterScreenState) {
if(this.phoneInputRef.current)
this.phoneInputRef.current.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,
},
});