Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Property 'getPickerData' does not exist on type 'RefObject>'

$
0
0

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;
               }

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>