Solvedreact native router flux Actions.[SCENE_NAME] is not working.

Version

Tell us which versions you are using (react native 0.26 is required for v3):

"react-native": "^0.26.2",
"react-native-button": "^1.6.0",
"react-native-drawer": "^2.2.3",
"react-native-router-flux": "^3.26.16",
"react-redux": "^4.4.5"

Expected behaviour

I implemented the drawer in my react-native application, I am using redux as well, I expect the side menu show up with the buttons to go to other scenes and when I click those buttons they will take me to another scene.

Actual behaviour

I click the side menu button and the buttons do nothing, I do click on them and the scene I was trying to go never show up.

This is my code:

app.js

      <Provider store={this.state.store}>
        <RouterWithRedux>
          <Scene key="drawer" component={NavigationDrawer}>
            <Scene key="root"
            tabs={true}
            component={connect(state => ({auth: state.auth}))(Switch)}
            selector={(props)=> props.auth.token !=='' ? "map" : "login"}>
              <Scene key="login" hideNavBar={true} component={Login} />
              <Scene key="map"  component={Map} title="Google Map" initial={true}/>
              <Scene key="todoApp" hideNavBar={true} component={TodoApp} title="Todos"   />
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>

Navigator

import React,{ Component} from 'react'
import Launch from './Launch'
import Drawer from 'react-native-drawer'
import {DefaultRenderer} from 'react-native-router-flux';

export default class Navigation extends Component {
    constructor(props){
        super(props);
    }
  render(){
    console.log(this.context);
    const navigationState = this.props.navigationState;
    let selected = navigationState.children[navigationState.index];
    // var activeScene = (selected.name == "root" : selected[0] ? selected);
        const children = this.props.navigationState.children;
    return (

        <Drawer
            ref="navigation"
            type="displace"
            content={<Launch />}
            tapToClose={true}
            openDrawerOffset={0.2}
            panCloseMask={0.2}
            negotiatePan={true}
            tweenHandler={(ratio) => ({
                 main: { opacity:Math.max(0.54,1-ratio) }
            })}>
              <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}  key={selected.key} {...selected} />
        </Drawer>
    );
  }
}

Launch.js

import React, {Component} from 'react'
import {View, Text, StyleSheet, TouchableHighlight} from 'react-native'
import Button from 'react-native-button'
var Actions = require('react-native-router-flux').Actions;

export default class Launch extends Component {
    constructor(props){
      super(props);
    }
    render(){
        return (
            <View {...this.props}  style={[styles.container, this.props.sceneStyle]}>
                <Text>Launch page</Text>
                <Button onPress={Actions.todoApp}>Todo App</Button>
                <Button onPress={Actions.map}>Map</Button>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    }
});
14 Answers

✔️Accepted Answer

with "react-native-router-flux": "^3.30.2", if i set "type" to my scenes, Actions dont work.

And in Drawer if i set tabs={true}, Actions.pop() dont work.
If i set tabs={false}, Actions.pop() works, renderLeftButton dont work, but renderBackButton work.
And set type="reset" dont work and i can go to Login with back button :s

            <Provider store={store}>
                <Router
                 sceneStyle={{backgroundColor:'white'}}
                 navigationBarStyle={Styles.navBar}
                 titleStyle={Styles.navTitle}
                 backButtonTextStyle={Styles.navTitleButtonStyle}
                 backButtonImage={this.backImage}
                 rightButtonTextStyle={Styles.navTitleButtonStyle}
                 leftButtonTextStyle={Styles.navTitleButtonStyle}
                >
                    <Scene key="root" >
                        <Scene key="Splash" initial={true} component={Splash} hideNavBar={true} />
                        <Scene key="Login" component={Login} hideNavBar={true} />

                        <Scene key='drawer' component={SideDrawer} open={false} type="reset">
                                <Scene key="main" tabs={false} hideTabBar={false}>

                                    <Scene key='Home' component={Home} renderBackButton={this.renderMenuButton} renderRightButton={this.renderNotificationButton} sceneStyle={{paddingTop: this.getNavBarOffset(), paddingLeft: 3}} navigationBarStyle={[Styles.navBar, {backgroundColor: Commons.Colors.purple}]} type={'reset'}/>

                                    <Scene key='Screen1' component={Screen1} renderBackButton={this.renderMenuButton} sceneStyle={{paddingTop: this.getNavBarOffset(), paddingLeft: 3}} />
                                    <Scene key='Screen2' component={Screen2} renderBackButton={this.renderMenuButton} sceneStyle={{paddingTop: this.getNavBarOffset(), paddingLeft: 3}} />


                                </Scene>
                        </Scene>
                    </Scene>
                </Router>
            </Provider>

Related Issues:

141
react native router flux Duplicate versions of react-native being installed
Got wrecked by this too Fixed with the rollback to 3.38.0 react-native-router-flux v3.38.1 react-nat...
49
react native router flux @providesModule naming collision error after installing react-native-router-flux
Same problem it works if you rollback to the previous version: yarn add react-native-router-flux@3.3...
32
react native router flux Help With Drawer Menu
Hi I implemented the Drawer from router-flux v4.0.0-beta.14 like this: (I couldnt find any info on h...
31
react native router flux Bundling error
Running packager like that resolves problem for me react-native start --reset-cache --verbose Verbos...
28
react native router flux Animations for transition on Android
To anyone who stumbles on to this thread - to get the old direction= behaviour back you can just add...
26
react native router flux Ability to provide the left/right navbar buttons from the rendered component
@jrwm thanks it works The current set up of the buttons is not ideal They have to be declared and ho...
25
react native router flux Back navigation won't work on Android
I solved this way: <Router backAndroidHandler={this.onBackPress}> and: I've noticed that on Android:...
23
react native router flux Fatal Exception: com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'r.default')
run this package.json snippet in postinstall or manually before release: For older react-navigation ...
22
react native router flux Double-tapping fires Actions twice
This is a workaround I use for the moment: For every button that triggers a navigation action ...
16
react native router flux Problem about pop and refresh
Hello guys I have the same problem with tab scene too : componentWillReceiveProps is not triggered u...
16
react native router flux onEnter/onExit hooks inside scenes components
@aksonov Can you provide a sample code using onEnter inside a component? Thanks ...
14
react native router flux Forbid swiping back
@mvaivre to disable swiping back passing panHandlers={null} worked for me e.g: <Scene key=modal comp...
13
react native router flux ERROR: UNMET PEER DEPENDENCY react@15.5.4
I fixed this by removing the little ^ symbol in my package.json file in front of the version number ...
5
react native router flux Actions.[SCENE_NAME] is not working.
with react-native-router-flux: ^3.30.2 if i set type to my scenes Actions dont work And in Drawer if...