Unable to switch between screens

[madhavgaba]

Version

Tell us which versions you are using:

• react-native-router-flux v4
• react-native v0.55

Here is my code of routes.js, after upgrading to v4 I am unable to switch between screens, what is wrong with this implementation, whenever I try to navigate from footer, it fallback to initial screen automatically.

import React, { Component } from 'react';
import { Scene, Router, Modal } from 'react-native-router-flux';
import { connect } from 'react-redux';

import Master from '../containers/Master';
import Home from '../containers/Home';
import Login from '../containers/Login';
import Register from '../containers/Register';
import Calculate from '../containers/Calculate';
import Activity from '../containers/Activity';
import TimelineTab from '../containers/TimelineTab';
import More from '../containers/More';
import About from '../containers/About';
import Terms from '../containers/Terms';
import Stats from '../containers/Stats';
import Friends from '../containers/Friends';
import Settings from '../containers/Settings';
import Forgot from '../containers/Forgot';

import Footer from '../components/Footer';

const RouterWithRedux = connect()(Router);

/**
 * navigator using react-native-router-flux
 * @extends Component
 */
class Navigator extends Component {
    render() {
        return (
            <RouterWithRedux>
                {/* <Scene key="modal" component={Modal} panHandlers={null}> */}
                    <Scene key="root" panHandlers={null}>
                        <Scene
                            key="master"
                            component={Master}
                            panHandlers={null}
                            initial
                            hideNavBar
                        />
                        <Scene key="landing" hideNavBar>
                            <Scene
                                key="home"
                                component={Home}
                                panHandlers={null}
                                initial
                            />
                            <Scene
                                key="login"
                                component={Login}
                                panHandlers={null}
                            />
                            <Scene
                                key="register"
                                component={Register}
                                panHandlers={null}
                            />
                            <Scene
                                key="forgot"
                                component={Forgot}
                                panHandlers={null}
                            />
                        </Scene>
                        <Scene key="main" navBar={Footer} panHandlers={null}>
                            <Scene
                                key="timeline"
                                component={TimelineTab}
                                panHandlers={null}
                            />
                            <Scene
                                key="calculate"
                                component={Calculate}
                                panHandlers={null}
                                initial
                            />
                            <Scene
                                key="activity"
                                component={Activity}
                                panHandlers={null}
                            />
                            <Scene
                                key="more"
                                component={More}
                                panHandlers={null}
                            />
                            <Scene
                                key="about"
                                component={About}
                                panHandlers={null}
                                hideNavBar
                            />
                            <Scene
                                key="terms"
                                component={Terms}
                                panHandlers={null}
                                hideNavBar
                            />
                            <Scene
                                key="settings"
                                component={Settings}
                                panHandlers={null}
                                hideNavBar
                            />
                            <Scene
                                key="stats"
                                component={Stats}
                                panHandlers={null}
                            />
                            <Scene
                                key="friends"
                                component={Friends}
                                panHandlers={null}
                            />
                        </Scene>
                    </Scene>
                {/* </Scene> */}
            </RouterWithRedux>
        );
    }
}

export default Navigator;

[Blapi]

The Scene with key='root' should wrap all your scenes

And please, it's unreadable, check how to format a post...

[madhavgaba]

It is still not working, I tried commenting the part above key='root'

[aksonov]

Check Example project as well as starter app: https://github.com/aksonov/react-native-starter-app
Redux integration is a little bit different for Redux.