Unable to resolve React-Navigation

Question

I am new to React Native I am trying to run react-native-router-flux in Routes.js of my Project

import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from'./pages/Login';
import Signup from './pages/Signup';

export default class Routes extends Component<{}> {
render() {
    return(
        <Router>
            <Stack key="root" hideNavBar={true}>
                <Scene key="login" component={Login} title="Login" initial={true}/>
                <Scene key="signup" component={Signup} title="Register"/>
            </Stack>
        </Router>
        )
    }
}  

Although I came to this error:

Unable to resolve "./createNavigationContainer" from "node_modules\react-navigation\src\react-navigation.js"

I don't understand why this is popping up since I am not importing react-navigation. Could you please help me?

Answer 1

It's popping because you aren't importing react-navigation. It's dependent on react-navigation, you need that set up first, check the very first item in "Getting Started". It's an alternative API for react-navigation, so you need to set that up first.

Edit: the question was edited, so this doesn't really apply any more. I assume it is a versioning issue: the thing it is asking for stopped being a part of react-navigation in version 3, which has createAppContainer instead. So either you've set up react-navigation using an older API, which won't work, or there is an issue with the version of flux router you are using

Edit again: read the documentation for flux router carefully. The version you have is based on react-navigation 2, the version of react-navigation you are using is 4, APIs are different.

To install specific versions of a package use @ after the package name on the install command, so for yarn:

yarn add react-navigation@4.x

Or for npm

npm install --save react-native-router-flux@4.2.0-beta.1

I would advise upgrading flux router rather than downgrading react-navigation.

Note that React navigation 5 (which is almost production-ready, is broken into smaller packages and is installable using the @next version) has a React component-based interface that is quite similar to how flux router defines routes. EDIT: React Navigation v5 is now out of beta and AFAICS production-ready (anecdotally: I've encountered no bugs so far & am using it in production), so I would probably advise using that rather than layering other libraries on top.