React-native: null is not an object (evaluating 'this._component.getScrollableNode')

[jerson]

Description

http://crashes.to/s/280c411449d

Fatal Exception: com.facebook.react.common.JavascriptException: null is not an object (evaluating 'this._component.getScrollableNode'), stack:
value@297:1662
value@297:1031
unmountComponent@144:3508
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponentFromNode@234:1542
unmountComponentAtNode@234:1438
unmountComponentAtNodeAndRemoveContainer@234:1196
unmountApplicationComponentAtRootTag@328:1109
value@58:2827
<unknown>@58:1062
d@58:130
value@58:1034

       at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:97)
       at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:81)
       at java.lang.reflect.Method.invokeNative(Method.java)
       at java.lang.reflect.Method.invoke(Method.java:525)
       at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
       at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:730)
       at android.os.Handler.dispatchMessage(Handler.java:92)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
       at android.os.Looper.loop(Looper.java:137)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
       at java.lang.Thread.run(Thread.java:841)

Additional Information

• React Native version: RN 0.36
• Platform: Android
• Operating System: MacOS

[brentvatne]

@janicduplessis - based on the comment that @jerson included above this is related to Animated, any idea of the cause?

[npomfret]

I'm getting a similar error

undefined is not an object (evaluating 'this._component.getScrollableNode')

That line doesn't appear in my code base, it must be in react-native 0.36.

[janicduplessis]

This was added as part of native animated events PR

[janicduplessis]

I don't know how exactly refs work well enough so I'm not sure why it is null. This code gets called in both componentDidMount and componentWillUnmount. There are some null checks before accessing it in other code of the component so I guess it can be a reasonable fix to just add one there.

[npomfret]

I can see this (in 2 places)

      const ref = this._component.getScrollableNode ?
        this._component.getScrollableNode() :
        this._component;

So I guess this error means that _component is undefined, rather than the getScrollableNode being missing?

[janicduplessis]

yep _component being null is the issue here

[ide]

@janicduplessis my hypothesis is that children get unmounted before the parent. What we should be doing then is in _setComponentRef, check if the ref is null (this means that the referenced child is being unmounted) and clean up anything related to it. Does that make sense?

[npomfret]

Is there a work around in the mean time? Or is it likely to be caused by me misusing the library in some way.

[fanyuRN]

@npomfret yeah,my error is the same as you ;my RN version is 0.35

[npomfret]

Any thoughts on a work around? It's crashing my app completely.

[ide]

You could patch RN locally with null guards, it's not a good fix for the upstream codebase though.

[ajithamp]

i am also getting the same error someone help me quickly plsss

[szujak]

I have this issue on this configuration:
RN: v0.38
Platform: iOS
Operating System: MacOS (Sierra)

On Android everything works fine

Also on iOS i had problem with, but i fix this by include libRCTAnimation.a manually
https://github.com/facebook/react-native/issues/11094
https://github.com/facebook/react-native/issues/10638

[npomfret]

I still have this problem on RN 0.39. It's killing my app, but only of certain devices. Can't figure out why, but I don't know of a way to work around it. The view that it crashes on doesn't even have any animations on it.

http://crashes.to/s/c9af6ef3811

[janicduplessis]

Is anyone able to reproduce the crash consitently? From the stacktrace in the redbox screenshot it looks like it happens in componentWillReceiveProps, maybe it's not safe to assume refs have been set in this method.

[janicduplessis]

@gaearon Do you know if it's safe to use refs in componentWillReceiveProps with the current stack reconciler? I assume it is definitely not with Fiber.

[gaearon]

I don't think it is safe. They are detached before an update and attached after it's flushed.

[janicduplessis]

Looking at it more this code doesn't really work properly because we need the new and the old ref. Using componentWillReceiveProps isn't a good idea there I think detaching in componentWillUpdate and re-attaching in componentDidUpdate is the proper way to do it.

[janicduplessis]

@gaearon Would that be safe in both stack and fiber or would I need to also add a null check on the ref in componentWillUpdate?

[gaearon]

Can you create a minimal reproducing code for this? It’s hard for me to say without seeing what exactly you are running. You should be able to write this even against ReactDOM since reconciler works the same way. Does it happen sporadically or always? I would expect React to be consistent.

[janicduplessis]

I don't know exactly, I was mostly speculating based on the reports in this issue, I've never experienced this crash. I'll see if I can figure out a repro case.

[janicduplessis]

If someone that experience the crash could help figure out what causes this crash exactly it would also be great :)

[npomfret]

My app is suffering from this, but only when I deploy through iTunesConnect / TestFlight. So far I've not been able to reproduce in dev mode. And it doesn't happen consistently unfortunately.

I've searched my codebase for both componentWillUpdate and componentWillReceiveProps and they don't appear. Sorry I can't be of more help

[janicduplessis]

@npomfret You said earlier that the screen that crashed didn't have animations, are you using a navigation library? If so, which one? That could be where the crash is coming from.

@ajithamp Looks like you got the crash in dev mode, are you able to reproduce it? If so could you show us an example that causes it?

I tried reproducing this but wasn't able to, the ref seem fine in componentWillReceiveProps and I really don't see how it can be null. The code always renders the same component so the ref shouldn't ever change. Also tested with dev=false but that didn't help.

[gaearon]

@janicduplessis

the ref seem fine in componentWillReceiveProps and I really don't see how it can be null

It would be unsafe if _setComponentRef was different on every render, e.g. as a lambda.

But this:

      return (
        <Component
          {...this._propsAnimated.__getValue()}
          ref={this._setComponentRef}
        />

looks safe to me too.

[npomfret]

Please ignore my comment about not having animations on the page. I can't accurately tell from the crash reports what pages the user is actually looking at.

[EDIT] and I'm not using any navigation library other than what's in RN. Users claim that the crash happens without them doing anything, i.e. they open the app, wait for a bit and then it crashes. So no navigation.

[teyou]

I also have this issue on this configuration:
RN: v0.38.1
Platform: Android , (haven't tested on IOS)

Was upgraded my RN fom 0.34 to 0.38.1
No error on development mode.
This issue only appears after I run under generated signed APK (production apk).

[hashwin]

I am getting this consistently on development mode if I don't turn remote debugger on. With remote debugger on, everything works fine. The release version of the app also crashes with this error, so it's quite a problem.
RN: v0.39.2
Platform: Android, works ok on iOS

I recently updated from 0.35, this is the only issue remaining.

[hashwin]

[janicduplessis]

@hashwin Are you able to provide sample code that reproduces the crash?

[hashwin]

Hi @janicduplessis ,
If I use the remote debugger, everything works, so it's hard to track down which piece of code is causing the issue. I'll try to give you a summary of what I'm using.

I have a redux-based setup and I am using https://github.com/aksonov/react-native-router-flux for routing. I am able to go to the login page fine, but as the page transitions after logging in, this error occurs. I have been able to trace it to dispatching an action in componentDidMount. It does not matter which action I dispatch, this error always shows up - so I figure it's not related to any particular action.
If I don't dispatch, the page shows up, but I need the action to fetch the initial data.

[Simbamoureux]

Hello @janicduplessis
I use the exact same setup as you do, redux-based RN 0.37 app with react-native-router-flux for routing.
I have the exact same issue you are experiencing when dispatching in a componentDidMount().

I found that the problem was on this line of code:
this.context.store.dispatch(setFooterAction(action)).bind(this);
and found out that the error seems to come from the .bind(this), without it I can dispatch in my componentDidMount() function.

I don't know if I'm using either redux or the router wrongly but yeah it seems like dropping the .bind() can unblock the situation hopefully

[hashwin]

Not using bind. Using dispatch by connecting the class using react-redux.

[hashwin]

Correction: I am facing this error on iOS too. Again, it works fine when remote debugging is on.

[mphasize]

Same problem here, the project runs just fine when remote debugging is enabled, but produces errors without remote debugging or when deployed.

If a add null/undefined-guards (as discussed above), I have to do so in:

• AnimatedImplementation.js: in _attachNativeEvents(), _detachNativeEvents() for this._component
• TimerMixin.js: in setter(), getter() for _setter, _clearer
• TouchableOpacity.js: in touchableHandleActivePressIn(), touchableHandlePress(), _opacityInactive() for this.clearTimeout
• TouchableHighlights.js: in touchableHandleActivePressIn(), touchableHandlePress(), _hideUnderlay() for this.clearTimeout
• ListView.js: in componentDidMount(), componentDidUpdate() for this.requestAnimationFrame

To me it looks like these functions are called when they shouldn't be called according to the component lifecycle, but since the problem doesn't appear when the debugger is attached, it's hard to find what's causing the problem. Interesting case of observer effect.

React Native 0.37
iOS 9 & iOS 10

[mphasize]

Another interesting observation: With Remote Debugging turned off, showing the Inspector and then activating the "Touchables" overlays triggers a lot of side-effects and warnings in our code.

Another observer effect... since I'm not the most familiar with React Native atm I have to ask, is this normal behavior? Shouldn't the debugging tools avoid side-effects in the code? Or could this be due to some mistakes on our end, like attaching event handlers to the wrong kind of triggers?

[haikyuu]

I think the issue comes from Animated trying to attach ref to a stateless component. And stateless components cannot have refs.

Using class to create the component does fix the issue.

Here is a react-native project to reproduce it.

This was also asked in stackoverflow

[yelongfei2008]

@hashwin Behind this error there is a solution?

I feel really with componentDidMount (), but now I can't find any other way to solve.

[hashwin]

@yelongfei2008 I monkey patched my local react native codebase to guard against this._component being null in this._detachNativeEvents and this._attachNativeEvents. Works fine now, but looking forward to a proper solution to this.

[krzysztofp]

Same issue here - when do you think a fix can be done?

[SudoPlz]

In my case what haikyuu said solved it.
A had component that used ART in the background (a spinner), written stateless.

const Whatever = (props) => { // ..... bla bla

I changed it to a normal component:
class Whatever extends React.Component { // ..... bla bla

and I never saw the error ever since.

[jordanmkoncz]

I'm getting this error as well, only seems to be happening on Android for me, and I've seen it happen on Android 4.4.2, 6.0 and 7.0.

I'm using ART for a component in my app also, but my component that uses ART is already a normal component (extends React.Component). Not sure if maybe one of its child components is a stateless component and that's causing the issue, like @SudoPlz suggests? Also not sure if this error really gets triggered by anything relating to this component that uses ART.

My dependencies are:

"react": "~15.4.0",
"react-native": "0.41.2",

[apperside]

I had this problem because the child of TouchableHighlight was no a View but a Text. Making a View the direct child of TouchableHighlight solved my problem

These are my dependencies

"react": "16.0.0-alpha.3",
"react-native": "0.43.2",

[alexanderkjeldaas]

@haikyuu which standard RN components are stateless? View, Image, Text, ..?

Also, changing to stateful components - does this affect rendering performance given that stateless components should avoid re-rendering to a larger extent?

[nishantpardamwar]

it is happening with me also whenever i try to dispatch an event on componentDidMount()
using

"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",

EDIT:
i was calling a method which was calling another method having dispatch() call, so i now im calling that method directly and it fixed it for me.

[dummerbd]

I've ran into this a few times before reading @haikyuu comment. The exact issue I was seeing involves TouchableHighlight (possibly also TouchableOpacity). I got this error when using a Component class, a stateless functional component, and a Text component as a child. Simple fix:

<TouchableHighlight>
  <MyComponent/>
</TouchableHighlight>

change to:

<TouchableHighlight>
  <View>
    <MyComponent/>
  </View>
</TouchableHighlight>

[bhaskarmurthy]

I'm getting this error as well, only occurs in release builds on android. Debug builds seem to work fine.

Pretty stuck on this, it's blocking our release and I'm not sure where to proceed w/ debugging the root cause.

My stacktrace looks like:

06-27 15:12:17.952  9581  9655 E ReactNativeJS: undefined is not an object (evaluating 'this._component.getScrollableNode')
06-27 15:12:18.136  9581  9656 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
06-27 15:12:18.136  9581  9656 E AndroidRuntime: Process: com.foo.bar, PID: 9581
06-27 15:12:18.136  9581  9656 E AndroidRuntime: com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'this._component.getScrollableNode'), stack:
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@230:2508
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@230:1877
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3581
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3628
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3628
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountChildren@136:826
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountChildren@134:2295
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@114:348
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _updateRenderedComponent@138:6863
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _performComponentUpdate@138:6549
06-27 15:12:18.136  9581  9656 E AndroidRuntime: updateComponent@138:5788
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveComponent@138:4813
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveComponent@129:601
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _updateRenderedComponent@138:6780
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _performComponentUpdate@138:6549
06-27 15:12:18.136  9581  9656 E AndroidRuntime: updateComponent@138:5788
06-27 15:12:18.136  9581  9656 E AndroidRuntime: performUpdateIfNecessary@138:5029
06-27 15:12:18.136  9581  9656 E AndroidRuntime: performUpdateIfNecessary@129:963
06-27 15:12:18.136  9581  9656 E AndroidRuntime: s@125:940
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:617
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:617
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@125:2082
06-27 15:12:18.136  9581  9656 E AndroidRuntime: k@125:2254
06-27 15:12:18.136  9581  9656 E AndroidRuntime: closeAll@133:1270
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:704
06-27 15:12:18.136  9581  9656 E AndroidRuntime: batchedUpdates@206:485
06-27 15:12:18.136  9581  9656 E AndroidRuntime: o@125:412
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _receiveRootNodeIDEvent@116:647
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveTouches@116:1021
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@30:2778
06-27 15:12:18.136  9581  9656 E AndroidRuntime: <unknown>@30:1013
06-27 15:12:18.136  9581  9656 E AndroidRuntime: <unknown>@30:106
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@30:985
06-27 15:12:18.136  9581  9656 E AndroidRuntime:
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:97)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:81)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at java.lang.reflect.Method.invoke(Native Method)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:319)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at android.os.Handler.handleCallback(Handler.java:751)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at android.os.Handler.dispatchMessage(Handler.java:95)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at android.os.Looper.loop(Looper.java:154)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
06-27 15:12:18.136  9581  9656 E AndroidRuntime:    at java.lang.Thread.run(Thread.java:761)

[dvuvne]

I'm also getting the exact same error on when running the app on Android. This error displays on every touch event.

Dependencies:
"react": "~15.4.1"
"react-native": "0.42.0"

[OrangePiPiPiPi]

it happened to me yesterday,but I found in my project that caused by third party Component,I use 'jpush-react-native'and 'jcore-react-native' ,maybe the latest version is not suit for my project,so,my solution is remove them temporary

[sergeylaptev]

If you use custom component as direct child of TouchableOpacity, TouchableHighlight please be sure, that it's a class which extends Component or PureComponent.
I had simple Icon stateless component:

import React from 'react'
import { Image } from 'react-native'

const Icon = ({ glyph, ...props }) => (
  <Image {...props} source={glyph} />
)

Sometimes I was using it as direct child of <TouchableOpacity />.

<TouchableOpacity>
  <Icon glyph={...} />
</TouchableOpacity>

This causes the same error message as in this thread. After switching into class implementation everything works fine.

import React, { PureComponent } from 'react'
import { Image } from 'react-native'

class Icon extends PureComponent {
  render () {
    const { glyph, ...props } = this.props

    return (
      <Image {...props} source={glyph} />
    )
  }
}

[kiok46]

Still exists.

"react": "16.0.0-alpha.12",
"react-native": "0.47.1",

EDIT: I have made a custom Card element, simple file nothing fancy (40 lines) and this error occurs when import it in some other JS file. Funny part is that It doesn't occur when importing but occurs when that component is used.

import { Card } from './Card';

No error ^

<Card>
</Card>

error.

I am not using any Animation.

Edit 2: Solved it:

how?

I was doing export default Card (my bad) changing it to export {Card} fixed it.

Hope it helps someone.

[zackify]

Ran into this on iOS using a release build. Any ideas?

[zackify]

Hopefully this helps someone!

I narrowed it down in my app to react-navigation

When null'ing out the route stack and pushing a new route (without a stack in between or resetting correctly) it will throw this when you hit the back button. Here's the change I made:

[3210jr]

@zackify i think my issue is solvable by your approach. What is the file name of this file you are editing?

Thanks again!

[jamesone]

@zackify I think it's todo with react-navigation 🤔 When I route from a tab navigator to a stack navigator, it throws this error. However I cannot confirm this.

Any ideas?

[Jiujiale]

same issue . any solutions ?

[Unlighten]

Same issue here.

[phil-andrews]

I had this same issue and found the culprit to be linked to a module react-native-autofocus in what, I think, is use of Input. This probably won't solve your issue since the package is not widely used, but it might help you debug your source.

The issue only arose after building for production. It was for both iOS and Android.

"react": "16.0.0-alpha.12"
"react-native": "0.47.2"
"react-native-autofocus": "0.0.6"

[SaGaR1084]

[charleycesar]

I had the same issue but my problem only happen when I called AsyncStorage and use on this way

my friends @phil-andrews , @Unlighten , @Jiujiale , @jamesone , @zackify and @jerson
check if you are use AsyncStorage

My mistake was use AsyncStorage in this way

 await AsyncStorage.setItem("acceptedTerms_" + this.props.userId, "1").then(() => {
            myCallBack()
        });

I fix change my AsyncStorage to:

 await AsyncStorage.setItem("acceptedTerms_" + this.props.userId, "1", () => {
            myCallBack()
        });

[hramos]

It looks like 10b642a7af097bd508dab7b5d4723ccb4339d35f was an attempt to fix some of the crashes surfaced here. No one has commented on this issue since that fix landed, so I'll go ahead and close this.

For anyone else landing here in the future, who believes they are encountering a related issue: please open a new bug report with all the relevant information for your situation.