Upgrade to v4 broke - almost - everything

[abeltje1]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.15 (v3 is not supported)
• react-native v0.46.4

I have updated react-native-router-flux from v3 to v4 and my whole navigation is not working anymore. I've tried to read through example.js and the migrating guide but it still isn't clear to me how to solve this problem. In v3 everything worked perfectly with my setup, which used defaultrenderer and navigationState.children, but navigationState.children is gone and I can't seem to find the replacement.

My index.js:

import React, { Component }  from 'react';
import { Router, Scene, Actions, ActionConst, Switch, Modal }     from 'react-native-router-flux';
import { Provider }   from 'react-redux';
import { AppRegistry, Alert, View, Text, StyleSheet } from 'react-native';
import Login          from './components/auth/Login';
import Logout          from './components/auth/Logout';
import Loading          from './components/Loading';
import Password       from './components/auth/Password';
import NewPassword    from './components/auth/NewPassword';
import Name           from './components/auth/Name';
import ChatList       from './components/app/chat/ChatList';
import Channel        from './components/app/chat/Channel';
import Info           from './components/app/info/Info';
import Timeline           from './components/app/news/Timeline';
import News           from './components/app/news/News';
import NewNews           from './components/app/news/NewNews';
import NewsItem from "./components/app/news/NewsItem";
import Me             from './components/app/profile/Me';
import Settings             from './components/app/profile/Settings';
import User           from './components/app/profile/User';
import Forgot         from './components/auth/Forgot'
import Members        from './components/app/profile/Members';
import TeamMembers        from './components/app/profile/TeamMembers';
import AddTeamMembers        from './components/app/profile/AddTeamMembers';
import RemoveTeamMembers        from './components/app/profile/RemoveTeamMembers';
import Teams          from './components/app/profile/Teams';
import Invite         from './components/app/profile/Invite';
import Team           from './components/app/profile/Team';
import App            from './components/App';
import Blank          from './components/Blank';
import Drawer         from './components/Drawer';
import configureStore from '../store';
import { connect }    from 'react-redux';
import routing        from '../reducers/routing';
import { Thumbnail }  from 'native-base';
import styles         from './styles/styles';
import EStyleSheet    from 'react-native-extended-stylesheet';
import {AsyncStorage} from 'react-native';
import {nbStyle} from './styles/styles';

EStyleSheet.build();

let icons = {
    'Nieuws': require('../img/news.png'),
    'Chat': require('../img/chat-tabbar.png'),
    'Handboek': require('../img/information.png'),
    'Profiel': require('../img/profile.png')
};

const store = configureStore(AsyncStorage);
const RouterWithRedux = connect()(Router, []);

const TabIcon = props => {
    return (
        <View style={StyleSheet.flatten(nbStyle.tac)}>
            <Thumbnail square style={StyleSheet.flatten(styles.icon)} source={icons[props.title]}/>
            <Text style={StyleSheet.flatten(nbStyle.whitesmall)}>{props.title}</Text>
        </View>
    );
}

export default class Root extends Component {

  
  render = () =>
    (<Provider store={store}>
        <RouterWithRedux>        
            <Scene key="login" component={Login} hideNavBar={true}/>
            <Scene key="password" component={Password} hideNavBar={true}/>
            <Scene key="forgot" component={Forgot} hideNavBar={true}/>
            <Scene key="new" hideNavBar={true}>
                <Scene key="newpassword" component={NewPassword} hideNavBar={true} initial={true}/>
                <Scene key="name" component={Name} hideNavBar={true}/>
            </Scene>
            <Scene key="loading" component={Loading} hideNavBar={true} initial={true}/>
            <Scene key="logout" component={Logout} hideNavBar={true} type={ActionConst.RESET}/>
            <Scene key="app" component={App} type={ActionConst.RESET}>  

                <Scene key="drawer" component={Drawer} open={false} initial={true}>   
                    <Scene 
                        key="active" 
                        component={connect(state=>({active:state.environment.active}))(Switch)}
                        tabs 
                        unmountScenes
                        tabBarStyle={styles.tabBarStyle}
                        selector={props => props.active ? "environment" : "blank"}>                  
                        <Scene key="environment" tabs tabBarStyle={styles.tabBarStyle}>
                            <Scene key="news" title="Nieuws" icon={TabIcon} initial={true}  >
                                <Scene key="timeline" title="Nieuws" icon={TabIcon} component={Timeline} hideNavBar={true} initial={true}/>
                                <Scene key="newnewsitem" component={NewNews} title="" hideNavBar={true} hideTabBar={true}/>
                                <Scene key="newsView" component={News} title="" hideNavBar={true} hideTabBar={true}/>
                            </Scene>
                            <Scene key="chat" title="Chat" icon={TabIcon}  >
                                <Scene key="chatlist" component={ChatList} hideNavBar={true} initial={true} title="Chat"/>
                                <Scene key="channel" component={Channel} title="Channel" hideNavBar={true} hideTabBar={true} />
                            </Scene>
                            <Scene key="info" title="Handboek" icon={TabIcon} component={Info} hideNavBar={true}/>
                            <Scene key="profile" title="Profiel" icon={TabIcon}>
                                <Scene key="me" component={Me} title="Me" hideNavBar={true} initial={true}/>
                                <Scene key="settings" component={Settings} title="Settings" hideNavBar={true} initial={false}/>
                                <Scene key="user" component={User} title="User" hideNavBar={true} />
                                <Scene key="members" component={Members} title="Teamleden" hideNavBar={true}/>
                                <Scene key="team" component={Team} title="Team" hideNavBar={true}  hideTabBar={true}/>
                                <Scene key="teams" component={Teams} title="Teams" hideNavBar={true} />
                                <Scene key="invite" component={Invite} title="Invite" hideNavBar={true} hideTabBar={true}/>
                                <Scene key="teammembers" component={TeamMembers} title="TeamMembers" hideNavBar={true}/>
                                <Scene key="addteammembers" component={AddTeamMembers} title="TeamMembers" hideNavBar={true} hideTabBar={true}/>
                                <Scene key="removeteammembers" component={RemoveTeamMembers} title="TeamMembers" hideNavBar={true} />
                            </Scene>
                        </Scene>
                        <Scene key="blank" initial={true} component={Blank} hideNavBar={true}/>
                    </Scene>
                </Scene>
            </Scene>
          
        </RouterWithRedux>
    </Provider>);


}
AppRegistry.registerComponent('EitjeApp', () => Root);

My app.js:

import { View, AppState, Text, TouchableHighlight, TouchableOpacity } from 'react-native';
import React, { Component, PropTypes } from 'react';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
import { connect } from 'react-redux';

class App extends Component {

   render(){
        return (
            <DefaultRenderer navigationState={this.props.navigationState.children[0]} onNavigate={this.props.onNavigate}/>


        );
    }
}



export default connect(state => ({
    auth: state.auth,
    environment: state.environment.active,
    channel_url: state.chat.channel_url
    }))(App);

I tried quite some things: first of all, Switch is deprecated so I removed that in Scene key="active" (but it's unclear to me how to replace it). I also had to wrap all my scenes with a 'Root' scene, because I got the error that there should be only one scene. After these two fixes, my app runs but App.js errors because 'this.props.navigationState.children' does not exist anymore. Where do I find the children now? or should it be done differently altogether? Right now the only way to make my app render something, is remove the DefaultRenderer altogether, but then my routing is completely broken. I also do not have a tabbar anymore..it just doesn't show up. It did in v3. Even after removing DefaultRenderer, I can't call most of my scenes (Actions.scenename is undefined my simulator tells me). This seems to be because of the nesting of certain scenes. I can only access those scenes that are not nested in parent scenes. Why is that? Shouldn't I nest scenes? Or is there a different way of calling them? Lastly it also seems my drawer broke. I can't access it anymore. Am I missing one big thing or has the whole structure of RNRF really changed so much from v3 to v4? v4's features seem really nice..but for now it's hard for me to enjoy those 🤣 Last but not least: maybe it has something to do with RouterWithRedux? Because the example is just with 'Router' I thought maybe there's the missing link.

I'm sorry to have made an 'issue' out of this, because this is probably largely due to my own incompetence on the subject matter, but I have really tried following the example/migration docs and have been stuck for the whole day now. Maybe one of you sees the solution, for which I would be extremely grateful. Thanks a lot in advance.

Cheers!

[aksonov]

Please read 'breaking changes' carefully:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/MIGRATION.md especially item about custom navigators and impossibility of children and component props together.

DefaultRenderer concept is replaced with custom navigators from react-navigation. It is quite similar and more powerful:
https://reactnavigation.org/docs/navigators/custom
You could check example of custom navigators within RNRF source code: LightingNavigator and OverlayNavigator

You have to do convertation step-by-step and create issues (if any) for smaller steps. Closing this ticket.

About redux - v4 now fully supports redux (state is not 'read-only' like in v3), check #2115 and example repo provided there.

[abeltje1]

Thanks for your quick reply and help! I will try to figure it out. cheers!

[jaimecorrea]

Hi,

I need help on how to migrate my MenuDrawer from v3 to v4, there are many changes, I'm using react-native-drawer inside a MenuDrawer component but I can't use DefaultRenderer...

[abeltje1]

I decided sticking with v3, It gave me too much of a headache hehe. I'll check back in a few weeks time..still getting used to RN and Redux.

[JaxGit]

@jaimecorrea try to replace the <DefaultRenderer/> with your app's main Navigator node (which upgraded to v4), nest all nodes in this structure: app --- Drawers --- main Navigator which is using router-flux v4, then manage your drawer states in redux by yourself.

This strategy I use works with plain react-navigation, and I just verified that it also works with router-flux v4.

The advantage of keeping react-native-drawer instead of using react-navigation official drawer:
you can safely integrate router-flux/react-navigation (for bottom tabs, disable tab swiping), react-scrollable-tab-view (for upper tabs) and react-native-drawer without freezing the nested scrollable-tab-view on Android.