Search code examples
react-routerreact-nativereact-native-iosreact-native-router-flux

Swipe back moves multiple scenes


Setup

"react": "16.0.0-alpha.3",

"react-native": "0.43.1",

"react-native-router-flux": "^3.26.16"

Expected behaviour

On swipe back gesture, I expect to animate single scene only and go back by that scene.

Actual behaviour

From time to time (+- 50%), swipe back gesture animates 1 or multiple scenes. Despite it animates multiple scenes while swipe back is in progress, it goes back by single scene in every situation.

enter description here

Steps to reproduce

Give following scene hierarchy, do swipe back gesture

<Router createReducer={createNavigationReducer}>
  <Scene key="auth" component={RootScene} hideNavBar initial={true} />
  <Scene key="sceneLogin">
    <Scene key="sceneLogin1" component={LoginScene} title="Login" renderLeftButton={renderLeftButton} />
  </Scene>
  <Scene key="sceneRegister">
    <Scene key="sceneRegister1"
      component={RegistrationScene} title="New User" renderLeftButton={renderLeftButton} />
    <Scene key="sceneRegister2"
      component={RegistrationScene2} title="New User2" />
  </Scene>
</Router>

Reducer (basic)

export const createNavigationReducer = (params) => {
  const defaultReducer = Reducer(params);
  return (state, action) => {
    if (__DEV__) {
      /* eslint-disable no-console */
      if (console.group) console.group('Navigation:');
      console.log('ACTION:', action);
      if (console.groupEnd) console.groupEnd();
      /* eslint-enable no-console */
    }

    console.log(defaultReducer(state, action));
    return defaultReducer(state, action);
  };
};

Navigation actions

// Root view (with "New User" button)

New user -> Actions.sceneRegister

// New User scene

go next -> Actions.sceneRegister2


Solution

  • Use panHandlers={null} on your Scene.