How to navigate errors showing after I run React Native app on Mac with command 'react-native run-android'?

Issue

I run the app with the command "react-native run-android" and it worked.
But after logging in the app with user login info, it shows black error screens and following is the error message.

 ERROR  TypeError: undefined is not a function

This error is located at:
    in Drawer (created by DrawerView)
    in DrawerView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (at View.js:32)
    in View (created by CardContainer)
    in RCTView (at View.js:32)
    in View (created by CardContainer)
    in RCTView (at View.js:32)
    in View
    in CardSheet (created by Card)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (created by Card)
    in RCTView (at View.js:32)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at src/index.native.tsx:252)
    in MaybeFreeze (at src/index.native.tsx:251)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (at src/index.native.tsx:330)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack
    in KeyboardManager (created by SafeAreaInsetsContext)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:14)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackView)
    in StackView
    in Unknown (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (at Router.js:101)
    in App (at Router.js:127)
    in Router (created by Connect(Router))
    in Connect(Router) (at navigator/index.js:350)
    in _default (at src/index.js:89)
    in Provider (at src/index.js:88)
    in RCTView (at View.js:32)
    in View (at src/index.js:81)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
 WARN  EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
 WARN  EventEmitter.removeListener('url', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
 ERROR  TypeError: undefined is not a function

This error is located at:
    in NavigationContainer (at Router.js:101)
    in App (at Router.js:127)
    in Router (created by Connect(Router))
    in Connect(Router) (at navigator/index.js:350)
    in _default (at src/index.js:89)
    in Provider (at src/index.js:88)
    in RCTView (at View.js:32)
    in View (at src/index.js:81)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
 ERROR  TypeError: undefined is not a function

This error is located at:
    in NavigationContainer (at Router.js:101)
    in App (at Router.js:127)
    in Router (created by Connect(Router))
    in Connect(Router) (at navigator/index.js:350)
    in _default (at src/index.js:89)
    in Provider (at src/index.js:88)
    in RCTView (at View.js:32)
    in View (at src/index.js:81)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
 ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in ReactNativeModal (at Loader/index.js:49)

As seen in the error message, error is located at many places but I assume it’s not like that. What I am wondering about is how I should fine a glue from the error message like what is wrong, where the error comes from, if it is due to react/react-native/gradle version isse?

I attach my package.json file so that you can get better view.

{
  "name": "***",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "source ~/.bash_profile&&react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-transform-arrow-functions": "^7.16.7",
    "@babel/plugin-transform-shorthand-properties": "^7.16.7",
    "@babel/plugin-transform-template-literals": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@flyerhq/react-native-android-uri-path": "^2.3.0",
    "@portify/react-native-datepicker": "^1.7.2",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.15.17",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/datetimepicker": "^5.1.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^4.4.0",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/app": "^14.3.0",
    "@react-native-firebase/messaging": "^14.3.0",
    "@sentry/react-native": "^1.9.0",
    "add": "^2.0.6",
    "apisauce": "^0.14.3",
    "axios": "^0.21.0",
    "babel": "^6.23.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "base-64": "^0.1.0",
    "bugsnag-react-native": "^2.10.0",
    "format-unicorn": "^1.1.1",
    "geolib": "^2.0.24",
    "jetifier": "^2.0.0",
    "lodash": "^4.17.10",
    "moment": "^2.29.1",
    "prop-types": "^15.6.1",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "0.67.2",
    "react-native-actionsheet": "^2.4.2",
    "react-native-animatable": "^1.3.3",
    "react-native-collapsible": "^1.6.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-eject": "^0.1.2",
    "react-native-fence-html": "^1.0.6",
    "react-native-geocoder": "^0.5.0",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-htmlview": "^0.13.0",
    "react-native-image-crop-picker": "^0.35.1",
    "react-native-image-picker": "^4.7.3",
    "react-native-image-placeholder": "^1.0.14",
    "react-native-image-progress": "^1.1.1",
    "react-native-image-resizer": "^1.4.5",
    "react-native-keyboard-aware-scroll-view": "^0.5.0",
    "react-native-keyboard-manager": "^4.0.13-7",
    "react-native-lightbox": "^0.7.0",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-location-switch": "https://github.com/Miyaguisan/react-native-location-switch",
    "react-native-maps": "^0.30.1",
    "react-native-message-bar": "^2.0.10",
    "react-native-modal": "^6.0.0",
    "react-native-modal-datetime-picker": "^13.0.1",
    "react-native-openanything": "^0.0.3",
    "react-native-pager-view": "^5.4.9",
    "react-native-parsed-text": "^0.0.20",
    "react-native-permissions": "^3.2.0",
    "react-native-progress": "^4.1.2",
    "react-native-progress-bar-animated": "^1.0.6",
    "react-native-pulse": "^1.0.7",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "^2.4.1",
    "react-native-responsive-dimensions": "^1.0.2",
    "react-native-router-flux": "4.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
    "react-native-size-matters": "^0.1.0",
    "react-native-smart-badge": "^1.1.1",
    "react-native-spinkit": "^1.3.0",
    "react-native-splash-screen": "^3.0.7",
    "react-native-star-rating": "^1.0.9",
    "react-native-swipeout": "^2.3.3",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-ui-xg": "^0.0.6",
    "react-native-web": "^0.17.5",
    "react-navigation": "^4.4.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-storage": "^4.1.2",
    "redux-storage-decorator-filter": "^1.1.8",
    "redux-storage-engine-reactnativeasyncstorage": "^1.0.5",
    "rnpm": "^1.9.0",
    "seamless-immutable": "^7.1.3",
    "tipsi-stripe": "7.5.0",
    "yarn": "^1.6.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.17.0",
    "@react-native-community/eslint-config": "3.0.1",
    "babel-jest": "27.4.6",
    "eslint": "8.8.0",
    "jest": "27.4.7",
    "metro-react-native-babel-preset": "0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

And here is the screenshot showing errors: Error showing screen on android emulator

Solution

I found the answer here Getting 'TypeError: interpolate is not a function' in React-Native

I replaced the interpolate() function to interpolateNode() function in drawer.js from node_modules/react-navigation-drawer/lib/module/views/ folder.

Answered By – VecopWall

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published