Invalid hook call

[johandeklerk]

Here is my package.json :

{ "scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios", "web": "expo start --web" }, "dependencies": { "@react-native-community/checkbox": "^0.4.2", "@react-native-community/masked-view": "^0.1.6", "axios": "^0.19.2", "expo": "~37.0.3", "expo-ads-admob": "~8.1.0", "expo-splash-screen": "^0.2.3", "expo-updates": "~0.2.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "~0.61.5", "react-native-collapsible": "^1.5.2", "react-native-error-boundary": "^1.1.0", "react-native-gesture-handler": "~1.6.0", "react-native-keyboard-aware-scroll-view": "^0.9.1", "react-native-multi-level-selector": "^1.0.9", "react-native-onesignal": "^3.9.0", "react-native-reanimated": "~1.7.0", "react-native-render-html": "^4.2.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "~2.2.0", "react-native-unimodules": "~0.9.0", "react-native-web": "~0.11.7", "react-native-webview": "^10.3.1", "react-navigation": "^4.3.9", "react-navigation-stack": "^2.5.1", "react-navigation-tabs": "^2.8.13" }, "devDependencies": { "@babel/core": "^7.8.6", "babel-jest": "~25.2.6", "babel-preset-expo": "~8.1.0", "eslint": "^7.4.0", "eslint-plugin-react": "^7.20.0", "jest": "~25.2.6", "react-test-renderer": "~16.9.0" }, "private": true, "name": "app", "version": "1.0.0" }

And I used the example code as per the readme... please help. I really want to use this component. Its perfect for my use case.

[dozsolti]

This means that you can use useState or useLayoutEffect only in function component (and not with classes)
https://reactjs.org/docs/components-and-props.html#function-and-class-components

As I see it uses useState and useLayoutEffect in DropDownItem.js which is ok because DropDownItem is a function, but then it imports it in DropDown.js which is not, is a class component.

You can try and rewrite the whole DropDown into a function but I'm not totally it will work after it.