Dimensions.addEventListener is not a function #2824

LouisJS · 2017-10-25T16:27:53Z

Current Behavior

When i'm trying to use react-navigation in my project.
I'm having :

_reactNative.Dimensions.addEventListener is not a function

withOrientation.componentDidMount
with.Orientation.js:37:17

It worked until really recently when i tried to remove my node_modules and install them again.

Your Environment

software	version
react-navigation	"^1.0.0-beta.13",
react-native	"0.42.x"
node	v8.3.0
npm or yarn	4.6.1

spencercarli · 2017-10-26T01:31:01Z

Can you ensure you're using the latest release? 1.0.0-beta.15

kelset · 2017-10-26T07:42:22Z

tbh you are almost 8 versions of react native behind, and probably some of the other libraries/nested dependencies have been updated to be compliant to newer versions.

That said, why do you think it's related to react-navigation? Can you post the complete error log?

LouisJS · 2017-10-26T07:44:56Z

Still not working with "react-navigation": "^1.0.0-beta.15"
And for compatibility issue, i'm stuck with react 0.42.x

LouisJS · 2017-10-26T07:54:54Z

This is the 2 errors i have in the console of the React Native Debugger

ExceptionsManager.js:63 _reactNative.Dimensions.addEventListener is not a function
   handleException @ ExceptionsManager.js:63
   handleError @ InitializeCore.js:114
   reportFatalError @ error-guard.js:44
   guard @ MessageQueue.js:48
   callFunctionReturnFlushedQueue @ MessageQueue.js:107
   (anonymous) @ debuggerWorker.js:71
Unhandled JS Exception: _reactNative.Dimensions.addEventListener is not a function
   reactConsoleErrorHandler @ ExceptionsManager.js:71
   console.error @ YellowBox.js:62
   logIfNoNativeHook @ RCTLog.js:38
   __callFunction @ MessageQueue.js:242
   (anonymous) @ MessageQueue.js:108
   guard @ MessageQueue.js:46
   callFunctionReturnFlushedQueue @ MessageQueue.js:107
   (anonymous) @ debuggerWorker.js:71

LouisJS · 2017-10-26T07:56:47Z

@kelset As i said, It was working before. I've just got this issue since in reinstalled my dependencies

kelset · 2017-10-26T08:03:02Z

I've just got this issue since in reinstalled my dependencies

Then it's 100% related to some nested dependency of any of the libraries you are using in your project. So I don't understand why it should be react-navigation causing the issue (moreover, as you said, it was working before).

Unluckly in the react-native world you have to keep up with newer versions of the all the libraries you are using because even the main library is still in beta. So tbh you have no choice but to update to newer versions.

Rhysjc · 2017-10-26T10:14:35Z

I'm experiencing this today after adding react-navigation version 1.0.0-beta.15 to my project.

kelset · 2017-10-26T11:04:41Z

I don't know what you are trying to obtain @LouisJS by opening a clone issue (#2830).

Unless:

you can provide a reliable test project that reproduces the issue
you have definitive proof that it's caused by react-navigation - since the error log you posted states that it's caused by react-native

I won't re-open this issue. Again, you are using a really old version of the react-native, you should update.

ghost · 2017-10-26T13:12:47Z

I'm also having this issue today. My RN version is 0.42.0, node v8.1.2, npm v4.6.1 and react-navigation v1.0.0-beta.11.
I'm using a TabNavigator that when removed the error doesn't show. This can be a react-native issue since it refers to Dimensions but this only occurred when I did a fresh npm install.
Found an issue related to this on RN, facebook/react-native#10635.
I get that error when running with Debug remote activated.

ghost · 2017-10-26T14:57:26Z

Was able to fix this by updating a react-navigation dependency, react-native-tab-view to version 0.0.67.
Hope this helps.

swl367 · 2017-10-26T16:44:25Z

Our team had the issue with react-navigation v1.0.0-beta.15. Downgrading to .11 resolved the issue.

yusisi · 2017-10-27T08:39:02Z

I have the same issue eith both react-navigation v1.0.0-beta.15 and .11

spencercarli · 2017-10-28T15:22:45Z

The causes of this is the addition of withOrientation which helps the navbar work in a more consistent manner (though it will be replaced later). @swl367 @yusisi it seems this issue is related to having a vastly outdated version of React Native. What version are you running on?

If you're on 0.42 or below you'll run into issues because Dimensions.addEventListener wasn't added until 0.43. 0.43 came out in April.

swl367 · 2017-10-28T15:26:40Z

Makes sense. I’m on 0.42.3

…

On Sat, Oct 28, 2017 at 10:22 AM Spencer Carli ***@***.***> wrote: The causes of this is the addition of withOrientation which helps the navbar work in a more consistent manner (though it will be replaced later). @swl367 <https://github.com/swl367> @yusisi <https://github.com/yusisi> it seems this issue is related to having a vastly outdated version of React Native. What version are you running on? If you're on 0.42 or below you'll run into issues because Dimensions.addEventListener wasn't added until 0.43. 0.43 came out in April. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2824 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA_qRqcQtVlyKkWeAjgqsS1D_l-kxvznks5sw0bMgaJpZM4QGSne> .

adnanaliarshad · 2018-01-16T19:28:07Z

I face similar issue and my packages were:

react-native 0.42.3
react-navigation: 1.0.0-beta.26

I had to downgrade react-navigation to 1.0.0-beta.13 to fix this issue.

javahuang · 2018-02-05T04:17:43Z

TypeError: addListener is not a function

This error is located at:
    in CardStack (at CardStackTransitioner.js:66)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:151)
    in Transitioner (at CardStackTransitioner.js:19)
    in CardStackTransitioner (at StackNavigator.js:38)

i face simiar issue too
my packages were:

"react-native": "0.52.0",
"react-navigation": "^1.0.0-beta.29",

I had to downgrade react-navigation to 1.0.0-beta.21 to fix this issue

-- update
downgrade the version is not the correct solution... because i face another issue 😢
i check the latest source code, and found that, if your component don't have the navigation property, then the addListener method will add to the navigation property, so i change my code and add the addListener method manual or maybe u can remove the navigation property

const navigation = addNavigationHelpers({ dispatch, state: router, addListener: () => {} })
return <AppNavigator navigation={navigation} />

batical · 2018-02-05T16:01:25Z

Same, downgrade to :

"1.0.0-beta.27"

MAYDAY1993 · 2018-02-23T03:48:46Z

@adnanaliarshad thank you so much ,I've been stuck with this problem these two days.

  "react-native": "0.42.3",
   "react-navigation": "^1.1.2"

downgrade react-navigation to:

1.0.0-beta.13

works fine 😃

Fsarmento · 2018-02-26T13:19:37Z

(react-native: 0.53.3) After updating to v1.0.0-beta.28 I also started getting the same error as @javahuang. I then updated to the last version of react-navigation (v 1.2.0) and I was still getting the same error:

TypeError: addListener is not a function
ExceptionsManager.js:65
This error is located at:
    in CardStack (at CardStackTransitioner.js:67)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:142)
    in Transitioner (at CardStackTransitioner.js:19)
    in CardStackTransitioner (at StackNavigator.js:39)

I had a look at react-navigation documentation regarding redux integration again and it seems that after 1.0.0-beta.28, addNavigationHelpers have a third parameter addListener.


const addListener = createReduxBoundAddListener("root");     <-- new

class App extends React.Component {
  render() {
    return (
      <AppNavigator navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
        addListener,                          <-- new
      })} />
    );
  }
}

After adding the addListener, I stopped getting the error. However, now I get another error when using this.props.navigation.navigate. It seems that I lose dispatch in the process.

TypeError: dispatch is not a function
    at Object.onTransitionEnd (/Users/francisco/dev/peeq/.vscode/.react/index.bundle:59878:11)
    at Transitioner._callee2$ (/Users/francisco/dev/peeq/.vscode/.react/index.bundle:63848:41)
    at tryCatch (/Users/francisco/dev/peeq/.vscode/.react/index.bundle:14069:19)

Edit

Before I was passing mapDispatchToProps as an object of actionCreators, but now I also have to assign dispatch:

const mapDispatchToProps = (dispatch) => {
  const ActionCreators = {
    loginUserSuccess,
    ...
  }; 
  return Object.assign({ dispatch }, bindActionCreators(ActionCreators, dispatch));
};

const AppWithNavigationState = connect(mapStateToProps, mapDispatchToProps)(App);

Everything is working great on v1.2.0 👍 🎉

spencercarli added the needs more info label Oct 26, 2017

kelset closed this as completed Oct 26, 2017

kelset mentioned this issue Oct 26, 2017

[BETA-14] _reactNative.Dimensions.addEventListener is not a function #2830

Closed

kelset mentioned this issue Oct 27, 2017

_reactNative.Dimensions.addEventListener is not a function #2836

Closed

MAYDAY1993 mentioned this issue Feb 23, 2018

react-navigation ：dimensions.addEventlListener is not a function MAYDAY1993/mayday1993.github.io#54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dimensions.addEventListener is not a function #2824

Dimensions.addEventListener is not a function #2824

LouisJS commented Oct 25, 2017 •

edited

spencercarli commented Oct 26, 2017

kelset commented Oct 26, 2017

LouisJS commented Oct 26, 2017

LouisJS commented Oct 26, 2017

LouisJS commented Oct 26, 2017

kelset commented Oct 26, 2017

Rhysjc commented Oct 26, 2017

kelset commented Oct 26, 2017

ghost commented Oct 26, 2017 •

edited by ghost

ghost commented Oct 26, 2017

swl367 commented Oct 26, 2017

yusisi commented Oct 27, 2017

spencercarli commented Oct 28, 2017

swl367 commented Oct 28, 2017 via email

adnanaliarshad commented Jan 16, 2018

javahuang commented Feb 5, 2018 •

edited

batical commented Feb 5, 2018

MAYDAY1993 commented Feb 23, 2018

Fsarmento commented Feb 26, 2018 •

edited

Dimensions.addEventListener is not a function #2824

Dimensions.addEventListener is not a function #2824

Comments

LouisJS commented Oct 25, 2017 • edited

Current Behavior

Your Environment

spencercarli commented Oct 26, 2017

kelset commented Oct 26, 2017

LouisJS commented Oct 26, 2017

LouisJS commented Oct 26, 2017

LouisJS commented Oct 26, 2017

kelset commented Oct 26, 2017

Rhysjc commented Oct 26, 2017

kelset commented Oct 26, 2017

ghost commented Oct 26, 2017 • edited by ghost

ghost commented Oct 26, 2017

swl367 commented Oct 26, 2017

yusisi commented Oct 27, 2017

spencercarli commented Oct 28, 2017

swl367 commented Oct 28, 2017 via email

adnanaliarshad commented Jan 16, 2018

javahuang commented Feb 5, 2018 • edited

batical commented Feb 5, 2018

MAYDAY1993 commented Feb 23, 2018

Fsarmento commented Feb 26, 2018 • edited

Edit

LouisJS commented Oct 25, 2017 •

edited

ghost commented Oct 26, 2017 •

edited by ghost

javahuang commented Feb 5, 2018 •

edited

Fsarmento commented Feb 26, 2018 •

edited