Hello I am new to react native and I am having a problem. I am working on a mobile app. Expo recently stopped supporting 40 SDK and I had to update it to 42. After that, the application got the following error.
Unable to resolve module react-native-collapsible/config from D:Programmingmessenger3sellengage-mobilesrccomponentsAccordionindex.js: react-native-collapsible/config could not be found within the project.
Here is the code (Accordion component)
import React from 'react';
import {View, Animated} from 'react-native';
import Collapsible from 'react-native-collapsible';
import {ListItem, List} from 'native-base';
import PropTypes from 'prop-types';
import {ViewPropTypes} from 'react-native-collapsible/config';
const COLLAPSIBLE_PROPS = Object.keys(Collapsible.propTypes);
const VIEW_PROPS = Object.keys(ViewPropTypes);
const CUSTOM_PROPS = Object.keys({
ListFooterComponent: '',
contentContainerStyle: '',
onScroll: '',
onMomentumScrollEnd: '',
overScrollMode: '',
onEndReached: '',
onEndReachedThreshold: '',
refreshControl: '',
scrollEventThrottle: '',
});
If I remove import ViewPropTypes from react-native-collapsible/config and import it from react-native the following error appears
TypeError: undefined is not an object (evaluating 'Object.keys(_reactNativeCollapsible.default.propTypes)')
Stack trace:
node_modulesreact-nativeLibrariesLogBoxLogBox.js:148:8 in registerError
node_modulesreact-nativeLibrariesLogBoxLogBox.js:59:8 in errorImpl
node_modulesreact-nativeLibrariesLogBoxLogBox.js:33:4 in console.error
node_modulesexpobuildenvironmentreact-native-logs.fx.js:27:4 in error
node_modulesreact-nativeLibrariesCoreExceptionsManager.js:104:6 in reportException
node_modulesreact-nativeLibrariesCoreExceptionsManager.js:171:19 in handleException
node_modulesreact-nativeLibrariesCoresetUpErrorHandling.js:24:6 in handleError
node_modulesexpo-error-recoverybuildErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
node_modulesregenerator-runtimeruntime.js:63:36 in tryCatch
node_modulesregenerator-runtimeruntime.js:294:29 in invoke
node_modulesregenerator-runtimeruntime.js:63:36 in tryCatch
node_modulesregenerator-runtimeruntime.js:155:27 in invoke
node_modulesregenerator-runtimeruntime.js:165:18 in PromiseImpl.resolve.then$argument_0
node_modulesreact-nativenode_modulespromisesetimmediatecore.js:37:13 in tryCallOne
node_modulesreact-nativenode_modulespromisesetimmediatecore.js:123:24 in setImmediate$argument_0
node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:130:14 in _callTimer
node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:181:14 in _callImmediatesPass
node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:441:30 in callImmediates
node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:387:6 in __callImmediates
node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:135:6 in __guard$argument_0
node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:364:10 in __guard
node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:134:4 in flushedQueue
[native code]:null in flushedQueue
[native code]:null in invokeCallbackAndReturnFlushedQueue
I didn’t create this project from scratch, initially another person worked on it. I can only assume that with the update to the new version, some functionality is outdated. I tried reinstalling node_modules, clearing the cache and downgrading versions, but nothing worked. Please help me to solve this issue.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"builda": "expo build:android"
},
"dependencies": {
"@react-native-community/datetimepicker": "3.5.2",
"@react-native-community/netinfo": "6.0.0",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"array-flat-polyfill": "^1.0.1",
"axios": "^0.21.0",
"chroma-js": "^2.1.2",
"date-fns": "^2.27.0",
"expo": "^42.0.0",
"expo-app-loading": "1.1.2",
"expo-camera": "~11.2.2",
"expo-constants": "~11.0.1",
"expo-document-picker": "~9.2.4",
"expo-file-system": "~11.1.3",
"expo-font": "~9.2.1",
"expo-image-manipulator": "~9.2.2",
"expo-image-picker": "~10.2.2",
"expo-intent-launcher": "~9.1.0",
"expo-media-library": "~12.1.2",
"expo-notifications": "~0.12.3",
"expo-permissions": "~12.1.1",
"expo-secure-store": "~10.2.0",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.2",
"expo-web-browser": "~9.2.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"native-base": "^2.15.2",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-content-loader": "^5.1.4",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-collapsible": "^1.6.0",
"react-native-collapsible-header-views": "^1.1.2",
"react-native-dimension": "^1.0.6",
"react-native-dropdown-picker": "^5.2.3",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-modal": "^1.0.16",
"react-native-inset-shadow": "^1.0.3",
"react-native-ionicons": "^4.6.5",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-modalize": "^2.0.8",
"react-native-multi-selectbox": "^1.5.0",
"react-native-multiple-select": "^0.5.7",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-svg": "12.1.1",
"react-native-tab-view": "^2.15.2",
"react-native-text-avatar": "^1.0.7",
"react-native-typing-animation": "^0.1.7",
"react-native-vector-icons": "^9.0.0",
"react-native-walkthrough-tooltip": "1.1.11",
"react-native-web": "~0.13.12",
"react-native-webview": "11.6.2",
"rgb-hex": "^4.0.0",
"string-to-color": "^2.2.2",
"typescript": "~4.0.0"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@expo/vector-icons": "^12.0.0",
"@types/react-native": "~0.63.2",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"lint-staged": {
"*.{ts,tsx,js,jsx,json,md}": [
"prettier --write"
],
"*.{ts,tsx}": [
"eslint --fix"
]
},
"private": true
}