'PhoneInput' cannot be used as a JSX component.

AhmadNaeemK commented 1 year ago

I am using react-native-phone-input v2.1.0 and getting this error in the editor.

'PhoneInput' cannot be used as a JSX component.
  Its type 'typeof PhoneInput' is not a valid JSX element type.
    Type 'typeof PhoneInput' is not assignable to type 'new (props: any) => Component<any, any, any>'.
      Types of construct signatures are incompatible.
        Type 'new (props: PhoneInputProps, context: any) => PhoneInput' is not assignable to type 'new (props: any) => Component<any, any, any>'.
          Target signature provides too few arguments. Expected 2 or more, but got 1.

I am using

react-native 0.71.6
react 18.2
reactt-native 2.1

rodrigodiasf1984 commented 1 year ago

Can you please share the code?

PP-Buzz commented 1 year ago

i have the same issue

developerslearnit commented 1 year ago

Any resolution yet?

AhmadNaeemK commented 1 year ago

@rodrigodiasf1984 I am simply using the component inside a view like this

import PhoneInput from 'react-native-phone-number-input';


<PhoneInput
    codeTextStyle={phoneInputStyles.codeText}
    containerStyle={phoneInputStyles.container}
    countryPickerProps={{ withAlphaFilter: true, theme: phoneInputStyles.countryPicker }}
    defaultCode="US"
    defaultValue={phoneNumber}
    layout="second"
    onChangeFormattedText={onChangePhoneNumber}
    onChangeText={handleChangeText}
    placeholder={DisplayTexts.mobile_number_placeholder}
    ref={phoneInputRef}
    textContainerStyle={phoneInputStyles.textContainer}
    textInputProps={{ maxFontSizeMultiplier: 1, numberOfLines: 1, value: phoneNumberWithoutCC }}
    textInputStyle={phoneInputStyles.textInput}
     value={phoneNumber}
/>```

The code works fine but typescript shows this error in my editor.

ritute commented 1 year ago

Same issue.

engrpatel21 commented 1 year ago

same issue, this is my package.json

{ "name": "home-chef-frontend", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.18.2", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.9.12", "@reduxjs/toolkit": "^1.9.5", "@rneui/base": "^4.0.0-rc.6", "@rneui/themed": "^4.0.0-rc.6", "axios": "^1.3.4", "buffer": "^6.0.3", "react": "18.2.0", "react-native": "^0.72.0", "react-native-bootsplash": "^4.5.2", "react-native-confirmation-code-field": "^7.3.1", "react-native-credit-card-input": "^0.4.1", "react-native-date-picker": "^4.2.13", "react-native-device-info": "^10.6.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.12.0", "react-native-google-places-autocomplete": "^2.5.1", "react-native-image-crop-picker": "^0.36.2", "react-native-image-picker": "^5.3.1", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.6.2", "react-native-maps": "^1.4.0", "react-native-modal": "^13.0.0", "react-native-modal-dropdown": "^1.0.2", "react-native-phone-number-input": "^2.1.0", "react-native-progress": "^5.0.0", "react-native-raw-bottom-sheet": "^2.2.0", "react-native-root-siblings": "^4.1.1", "react-native-root-toast": "^3.4.1", "react-native-safe-area-context": "^4.5.3", "react-native-screens": "^3.21.0", "react-native-share": "^8.2.1", "react-native-size-matters": "^0.4.0", "react-native-status-bar-height": "^2.6.0", "react-native-svg": "^13.9.0", "react-native-swiper": "^1.6.0", "react-native-vector-icons": "^9.2.0", "react-native-webview": "^13.2.2", "react-redux": "^8.0.5", "redux": "^4.2.1", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.0", "@tsconfig/react-native": "^3.0.0", "@types/metro-config": "^0.76.3", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "^0.76.5", "react-native-svg-transformer": "^1.0.0", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } }

i am using typescript in my native project. with a regular js project it works, but not with a typescript project

import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import PhoneInput from 'react-native-phone-number-input'

import { colors, deviceWidth } from '../constants';

const PhoneAppInput = ({ defaultValue, placeholder, defaultCode, onChangeText, onChangeFormattedText, phoneRef }) => { const [isFocused, setIsFocused] = useState(false); const handleFocus = () => { setIsFocused(true); };

export default PhoneAppInput;

const styles = StyleSheet.create({});

also this is the code in which i am trying to load the component, ive tried every method to import this file so it will work.

my guess is that (from layments in react) that the component that is being export is class component and not a functional component. but then again it might not even matter