TypeError: undefined is not a function (evaluating 'addListener') with the new stable release of react-navigation (1.0.0)

[marcosmartinez7]

Version

"react-native-router-flux": "4.0.0-beta.24",
"react-native": "0.50.4",

Im getting this error react-navigation/react-navigation#3416

the react native router flux uses internally as dependency "react-navigation": "^1.0.0-beta.19"

i am also using:

"redux-thunk": "^2.2.0",
"react-redux": "^5.0.6",
"react": "16.0.0",

any ideas why im getting this?

im using redux thunk like this:

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 this 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>
        );
    }
}

any idea? i have deleted node_modules and install all the packages again and now i have this problem..

Something weird is that im using yarn, so i do a yarn install, then yarn list and i get:

• [email protected] (THE LAST STABLE RELEASE)

as depth 0 package..

that would probably cause some conflict.. but i dont know if react-native-router-flux install this package as a root package too.. or there is another dependency that is installing this package

EDIT!: The thing is that now RNRF installs react-navigation 1.0.0 that is a newer release, after that it was installing 1.0.0-beta.27

so .. my app works with a beta version but doesnt with a stable release ..

any idea of why i am having this problem? because the addListener function is something that RNRF handles internally, RNRF is on top of react-navigation..

is there a way to install RNRF 4.0.0-beta.24 with react-navigation 1.0.0-beta.27? Because the package.json of RFRF is using ^ for that dependency...

[marcosmartinez7]

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) ? because i need to use RNRF 4.0.0-beta.24 , i cannot upgrade to RNRF 4.0.0-beta.28

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)

The main point of the issue is if you guys can mantain compatibility with the related dependencies

kind regards

[marcosmartinez7]

Workaround for now:

https://stackoverflow.com/questions/48672906/react-native-router-flux-typeerror-undefined-is-not-a-function-evaluating-ad

[aksonov]

Trying to make RNRF work with latest react-navigation... Any suggestions?

[Dorentin1997]

I made react-native-router-flux on this version:
"react-native-router-flux": "^4.0.0-beta.26"
It worked well.

[sajaddp]

Unfortunately, the RNRF has a poor documentation. In the 4.0.0-beta.30 version, even without using redux, there is an 'addListener' error.
Does the new version of RNRF work only with redux?

[NSShentu]

@sajaddp i setup my project without redux, why still has the addListener problem?

[aksonov]

It is because 1.x react-navigation introduced breaking changes, for external state management (so not only redux is affected). 2.x introducing more breaking changes.

[sajaddp]

@NSShentu,
This is my test code:

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <Router>
                <Stack hideNavBar>
                    <Scene key="root" component={TestPage} initial/>
                </Stack>
            </Router>
        )
    }
}

Can you get me a simple example?

package.json:
"react": "16.3.0-alpha.1",
"react-native": "0.54.3"
"react-native-router-flux": "^4.0.0-beta.30"

[NSShentu]

@sajaddp your code is simple enough... my Router is more complex... now i just try not to use the Actions.replace ...

[NSShentu]

in my old project, use:

"react-native-router-flux": "4.0.0-beta.24",
"react-navigation": "1.0.0-beta.21",

they work well.

[filipemerker]

@aksonov I'm not using redux, and I'm getting the same error. How can I get rid of this error? I'm only using react-native-router-flux

[marcosmartinez7]

@filipemerker , @NSShentu , this doesnt help? https://stackoverflow.com/questions/48672906/react-native-router-flux-typeerror-undefined-is-not-a-function-evaluating-ad

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists