Not able to Import import react-native-autocomplete-select in React Native App

Question

I want to use react-native-autocomplete-select for my project but when I am importing react-native-autocomplete-select it is giving an error . Although problem is occuring when I am trying to import it. View is working perfectly fine when i am removing this import.

[Sat Aug 08 2020 14:49:42.581]  ERROR    TypeError: undefined is not an object (evaluating '_react.default.PropTypes.array')
[Sat Aug 08 2020 14:49:42.583]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Sat Aug 08 2020 14:49:42.587]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

I have tried installing and importing PropTypes

here is my View

import React,{useState} from 'react';
import {StyleSheet,View,Text,Button,TextInput} from 'react-native';
import {useNavigation} from '@react-navigation/native'
import PropTypes from 'prop-types';
import AutoComplete from 'react-native-autocomplete-select'

const suggestions = [
    {text: 'suggestion1', anotherProperty: 'value'},
    {text: 'suggestion2', anotherProperty: 'value2'}
  ]

function Other(){
    const navigation=useNavigation();
    const [input, setInput] = useState("")

    const onSelect = (suggestion) => {
        console.log(suggestion) // the pressed suggestion
      }

    return(
        <View style={styles.container}>
            <View style={styles.button}>
                <Button title="Menu" onPress={()=>{navigation.toggleDrawer()}} />
            </View>
            <View style={styles.view}>
              <TextInput 
                style={styles.input}
                onChangeText={text=>setInput(text)}
                value={input}
                placeholder="text here..."
              />
            </View>
        </View>
    );
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignContent:'center'
    },
    button:{
        position:'absolute',
        top:10,
        right:10,
    },
    view:{
        padding:10,
        flex:1,
        marginTop:70
    },
    input:{
        height:50,
        borderColor:'#000',
        borderWidth:2,padding:10,
        borderRadius:5,
        fontSize:18
    }
});

export default Other;

please help me !!!And let me know if I am missing something here.

"react": "16.13.1",
"react-native": "0.63.2",

Thanks already.

maybe: https://stackoverflow.com/questions/43604603/module-appregistry-is-not-registered-callable-module-calling-runapplication — yaya, Aug 08 '20 at 09:58
Ciao, I can't see on your code where you use AutoComplete component. Can you show me please? — Giovanni Esposito, Aug 08 '20 at 09:58
@GiovanniEsposito he's just get the error on import... (he didn't used it even) — yaya, Aug 08 '20 at 09:59
OK, then the next question: why importing a component that is never used? — Giovanni Esposito, Aug 08 '20 at 10:03
@yaya Thanks For Your Help I have Solved the issue It was using old React.PropTypes — Naman, Aug 08 '20 at 10:39
@GiovanniEsposito For Your Help I have Solved the issue It was using old React.PropTypes in the component . — Naman, Aug 08 '20 at 10:40
@NamanSukhwani no problem, so you can add an answer to your question or rather delete it if you want . (cause an open solved question without any answer doesn't make sence.) — yaya, Aug 08 '20 at 11:26

score 1 · Accepted Answer · answered Aug 19 '20 at 12:11

OK, so I have solved this issue react-native-autocomplete-select uses an old react-native method i.e. React.PropTypes now with latest react they have removed PropTypes from react library So You have to edit react-native-autocomplete-select component here is the solution that you can use :-

first install prop-types

npm install --save prop-types

them make sure you have autocomplete select installed and go to your node_modules\react-native-autocomplete-select\AutoComplete\AutoComplete.js file

then do these changes

import React, { Component } from 'react'
import { TouchableHighlight, Text, TextInput, View } from 'react-native'
import stringScore from 'string_score'
import Styles from './Styles'
import PropTypes from 'prop-types';//import this 

class AutoComplete extends Component {
    render(){
       return(
       .....
       )
    }
}
.....

//apply changes here
AutoComplete.propTypes = {
  suggestions:PropTypes.array,
  value:PropTypes.string,
  minimumSimilarityScore:PropTypes.number,
  comparationFuzziness:PropTypes.number,
  suggestionObjectTextProperty:PropTypes.string,
  onChangeText:PropTypes.func,
  onSelect:PropTypes.func.isRequired,
  suggestionsWrapperStyle:PropTypes.any,
  suggestionStyle:PropTypes.any,
  suggestionTextStyle:PropTypes.any,
  style:PropTypes.any,
  inputStyle:PropTypes.any,
}

AutoComplete.defaultProps = {
  minimumSimilarityScore: 0.6,
  comparationFuzziness: 0.5
}

export default AutoComplete

that's all now use this package as you want to!!

Not able to Import import react-native-autocomplete-select in React Native App

1 Answers1