React native router flux: TypeError: undefined is not a function (evaluating 'addListener')

Question

Im working on a react native app using this principal dependencies:

• react native
• react native router flux
• react thunk
• expo

I was working using this package.json:

"dependencies": {
    "expo": "23.0.4",
    "humps": "^2.0.0",
    "install": "^0.10.1",
    "lodash": "^4.17.4",
    "native-base": "^2.3.5",
    "react": "16.0.0",
    "react-native": "0.50.4",
    "react-native-extend-indicator": "^0.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.4.2",
    "react-native-maps": "^0.19.0",
    "react-native-maps-directions": "^1.3.0",
    "react-native-modal-datetime-picker": "^4.13.0",
    "react-native-qrcode": "^0.2.6",
    "react-native-router-flux": "4.0.0-beta.24",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation-redux-debouncer": "^0.0.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "swagger-client": "2.1.32"
  }

The application is using expo so i install the dependencies using:

• yarn install

and then run the app by

• yarn start --reset-cache

I was working fine since i wanted to add a new dependencie, so i remove the node_modules folder and the yarn.lock file, added the new dependencie and execute yarn install again.

After that, im getting this error when opening the application:

TypeError: undefined is not a function (evaluating 'addListener')

it is related with react-navigation, but im using react-native-router-flux 4.0.0-beta.24 that uses react-navigation ^1.0.0-beta.19 internally.

I have recently notice that people using react-navigation are having some troubbles with this (https://github.com/react-navigation/react-navigation/issues/3416) but using the beta.28 version.

If i go back to a previous node_modules folder (from the trash) my application runs well, so.. probably the thing is that some dependency with the ^ symbol of my package.json is no more compatible.. maybe thunk or react native router flux with my react native version.

any ideas?

Here is the part of the code when i use the react thunk middleware:

import {applyMiddleware, compose, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import getRootReducer from "../reducers/index";
import navigationDebouncer from 'react-navigation-redux-debouncer';
import {restApi} from "../lib/restApi";

const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__  });

export default function getStore(initialState) {
    const enhancer = compose(
        applyMiddleware(
            thunkMiddleware.withExtraArgument(restApi),
            navigationDebouncer(600),
            loggerMiddleware
        ),
    );
    return createStore(
        getRootReducer,
        initialState,
        enhancer
    );
}

and here is the main app:

import React, {Component} from 'react';
import {Provider} from 'react-redux'
import getStore from './src/store/configureStore'
import {StatusBar} from 'react-native'
import AppNavigation from './src/navigation';

const Store = getStore();

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
        });
    }

    render() {
        StatusBar.setHidden(true);
        return (
            <Provider store={Store}>
                <AppNavigation/>
            </Provider>
        );
    }
}

EDIT: i have found that now react-native-router-flux uses 1.0.0 react-navigation (the new stable release), and after it was using the 1.0.0-beta.27 version.. the application works with the beta version but has this problem with the 1.0.0 version... so i realice that you are using a fixed version of react navigation in your last release (1.0.0-22.beta)

so the question is, is there a way to still using RNRF 4.0.0-beta.24 BUT using a fixed version (like 1.0.0-27.beta for example) ?

i mean, i think that is make no sence that 4.0.0-beta.24 uses ^1.0.0-beta19 (that will result in the installation of the last 1.0.0 release) and a newer version like 4.0.0-beta.28 uses a fixed lower version (1.0.0-beta.22)

Answer 1

So after doing some research and some tests i want to answer my question.

The problem was with the react-navigation dependency that handles internally react-native-router-flux

The dependencies are:

react-native-router-flux beta.0 - beta.24 -> react-navigation ^1.0.0-beta.19
react-native-router-flux beta.25 - beta.28 -> react-navigation 1.0.0-beta.22

the big difference here is that versions from 0 to beta24 uses ^

So .. what is the problem with that?

when installing the dependencies beta24 will search for the newest version of react-navigation since 1.0.0-beta.19, that version is the recent stable release 1.0.0 of react-navigation (the library is no more in beta version).

react-native-router-flux doesnt provide support for that dependency. It doesnt provide support to other olders dependencies neither, so they had just put the 1.0.0-beta22 react-navigation dependency fixed on their lastest releases package.json (since beta 26).

probably they will fix it since there are a lot of apps that use redux or other libraries that doesnt have good interaction with react-native-router-flux.

So for now.. the solution for Redux users is to go for the beta26 version, and for people that doesnt use redux probably beta27 and beta28 will be ok.

Here is the discussion: https://github.com/aksonov/react-native-router-flux/issues/2865

Here is another related issue: https://github.com/aksonov/react-native-router-flux/issues/2799