React-native-router-flux: view is not changing on scene selection

Created on 6 Jun 2016 · 9Comments · Source: aksonov/react-native-router-flux

Version

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

"react-native-router-flux": "3.26.1"
"react-native": "0.26.2"

Expected behaviour

change scenes

Actual behaviour

The console shows the scene is being pushed into the stack but the view does not change. I have used the example as the base for my project.

  render() {
        return <Router createReducer={reducerCreate} locationManager={BackgroundGeolocation}>
            <Scene key="root" component={NavigationDrawer} hideNavBar hideTabBar>
                <Scene key="login" component={Login} initial={true}/>
                <Scene key="home" component={Home}/>
                <Scene key="map" component={Map} />
            </Scene>
        </Router>
  }

const reducerCreate = params => {
    const defaultReducer = Reducer(params);
    return (state, action) => {
        console.log("ACTION:", action);
        return defaultReducer(state, action);
    }
};

   render() {
        const children = this.props.navigationState.children;
        return (
            <Drawer
                style={{ marginBottom: 20 }}
                ref={c => this.drawer = c}
                type="overlay"
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                content={<ControlPanel  closeDrawer={() => { this.drawer.close() } }/>}
                acceptPan = {this.state.isDisabled}
                closedDrawerOffset={-3}
                disabled={this.state.isDisabled}
                styles={{
                    drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3 },
                    main: { paddingLeft: 3 }
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity: (2 - ratio) / 2 }
                }) }>
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }

untitled

Source

texas697

Most helpful comment

I had the same issue and resolved it by changing navigationState={children[0]} to navigationState={children[children.length - 1]}

nickleach on 21 Jun 2016

👍4 🎉2

All 9 comments

Is this happening in the Example project as is? Or after you've made changes?

cridenour on 6 Jun 2016

after I made changes. this from my project

texas697 on 6 Jun 2016

Please reproduce the issue with our Example modification and give us repo.

aksonov on 8 Jun 2016

@texas697 Were you able to fix the issue? Could you share your solution?

dljcollette on 17 Jun 2016

@dljcollette

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  BackAndroid
} from 'react-native';


import NavigationDrawer from './Components/NavigationDrawer';


import {Scene, Reducer, Router, Switch, TabBar, Modal, Schema, Actions} from 'react-native-router-flux';
import Store from 'react-native-simple-store';
import SplashScreen from '@remobile/react-native-splashscreen';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

const reducerCreate = params => {
  const defaultReducer = Reducer(params);
  return (state, action) => {
    console.log("ACTION:", action);
    return defaultReducer(state, action);
  }
};

const getSceneStyle = function (props, computedProps) {
  const style = {
    flex: 1,
    backgroundColor: '#fff'
  };
  if (computedProps.isActive) {
    style.marginTop = computedProps.hideNavBar ? 0 : Metrics.navBarHeight;
  }
  return style;
};

const styles = {
  navbar: {
    backgroundColor: Colors.red,
    height: Metrics.navBarHeight
  },
  title: {
    top: 15,
    marginTop: 0,
    color: Colors.snow,
    fontWeight: 'normal',
    fontSize: Fonts.size.h6,
    fontFamily: Fonts.bold
  }
};

export default class RootRouter extends React.Component {

  componentWillMount = () => {
    BackAndroid.addEventListener('hardwareBackPress', () => Actions.pop());
  };

  render() {
    return <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
      <Scene key="modal" component={Modal} >
        <Scene key="root" hideNavBar hideTabBar>
          <Scene key="drawer" component={NavigationDrawer}>
            <Scene
              key="main"
              tabs={false}
              navigationBarStyle={styles.navbar}
              titleStyle={styles.title}
              drawerImage={require('./Images/menu_burger.png') }
              backButtonImage={require('./Images/back_chevron.png') }>
              <Scene key="login" component={Login} initial={true} hideNavBar={true} title="Login"  />
              <Scene key="home" component={Home} hideNavBar={false} type="replace" title="Home"/>
              <Scene key="subdivisions" component={Subdivisions} hideNavBar={false} title="Subdivisions"/>
              <Scene key="surveyMap" component={SurveyMap} hideNavBar={false} title="Survey Map" />
              <Scene key="gmapSurveyMap" component={GMAPSurveyMap} hideNavBar={false} title="GMAP Survey Map" />
              <Scene key="trips" component={Trips} hideNavBar={false} title="Trips" />
            </Scene>
          </Scene>
        </Scene>
      </Scene>
    </Router>;
  }
}

export default class NavigationDrawer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisabled: false
    }
  }

  componentDidMount() {
    this.hamburgerListener = AppEventEmitter.addListener('hamburger.click', this.openControlPanel.bind(this));
  }

  componentWillUnmount() {
    this.hamburgerListener.remove();
  }

  openControlPanel() {
    this.drawer.open();
  }

  render() {
    const state = this.props.navigationState;
    const children = state.children;
    return (
      <Drawer
        style={{ marginBottom: 20 }}
        ref="navigation"
        type="displace"
        tapToClose={true}
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        onOpen={() => Actions.refresh({ key: state.key, open: true }) }
        onClose={() => Actions.refresh({ key: state.key, open: false }) }
        content={<ControlPanel  closeDrawer={() => { this.drawer.close() } }/>}
        acceptPan = {this.state.isDisabled}
        closedDrawerOffset={-3}
        disabled={this.state.isDisabled}
        styles={{
          drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3 },
          main: { paddingLeft: 3 }
        }}
        tweenHandler={(ratio) => ({
          main: { opacity: (2 - ratio) / 2 }
        }) }>
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    );
  }
}

const contextTypes = {
    drawer: React.PropTypes.object,
};


const ControlPanel = (props, context) => {
    const drawer = context.drawer;

    return (
        <View style={styles.container}>
            <ScrollView>
                <View style={styles.linksContainer}>
                    <View style={{ position: 'relative' }}>
                        <MaterialIcon name="home" size={30} color={Colors.red} style={styles.icon}/>
                        <TouchableOpacity
                            style={styles.link}
                            underlayColor={Colors.charcoal}
                            onPress={() => { drawer.close(); Actions.home() } }>
                            <Text style={styles.text}>Home</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </ScrollView>
        </View>
    )
}
ControlPanel.contextTypes = contextTypes;

export default ControlPanel;
``

  "react-native-drawer": "^2.2.3",
"react": "^15.0.2",
 "react-native": "^0.26.3",
"react-native-router-flux": "^3.26.24",

texas697 on 17 Jun 2016

I am facing the same issue in my project, i see that both scene and focus actions are emitted but the scene doesn't change. I understand that it might be a bug somewhere in my code, but any suggestion on debugging it?

kgritesh on 20 Jun 2016

What RN and RNRF version do you use?

On 20 Jun 2016, at 06:31, Ritesh Kadmawala [email protected] wrote:

I am facing the same issue in my project, i see that both scene and focus actions are emitted but the scene doesn't change. I understand that it might be a bug somewhere in my code, but any suggestion on debugging it?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/787#issuecomment-227048386, or mute the thread https://github.com/notifications/unsubscribe/ABQpcdGKtpnyt_4J3yByX4TVD45TGv9uks5qNheLgaJpZM4Iu1hT.