React Native conflict between DrawerLayoutAndroid and Navigator

Question

I am writing an app in React Native specifically for Android, and I believe there is a conflict between the Navigator component and the DrawerLayoutAndroid component.

In my index.android.js I have the following navigator in the render method, the DrawerLayoutAndroid component contains a NavigationPane component which is just a list of pages the user can navigate to.

class App extends Component {
  _renderScene(route, navigator){
    var Component = route.component;
    return(
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => <NavigationPane navigator={navigator} route={route} />}>
        <ScrollView>
          <Component {...route.props}
            navigator={navigator}
            route={route}
            onBack={() => {
             if (route.index > 0) {
               navigator.pop();
             }
           }}
         />
        </ScrollView>
      </DrawerLayoutAndroid>
    )
  }
  render() {
    return (
        <Navigator
          initialRoute={{ component: LocalExpenseDisplay, name:'Home',  index: 0}}
          renderScene={this._renderScene}
        />
    );
  }
}

Whenever I push a new scene onto the navigator stack, the new page renders just fine, however when I try to pull the DrawerLayoutAndroid from the new page, it drags the new page too and pops it off the stack. The DrawerLayoutAndroid component is displayed but I have also been brought back to the initial page.

Is there a way I can have the DrawerLayoutAndroid on every page, without it popping new pages off the stack when I try to access it?

EDIT: Here is how the NavigationPane component is pushing pages onto the stack:

var NavigationPane = React.createClass({
  goToPage: function(data){
    var route = this.props.route;
    if(route.name != data.name){
      var nextIndex = route.index + 1;
      this.props.navigator.push({
        name: data.name,
        index: nextIndex,
        component: data.component
      });
    }
  },
  getInitialState: function(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(_navigationMenu),
    };
  },
  render: function(){
    return (
      <ScrollView contentContainerStyle={AppStyles.navigationPane}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(data) =>{
            return (
              <View style={AppStyles.navItemContainer}>
                <TouchableHighlight
                  style={AppStyles.navItemButton}
                  onPress={this.goToPage.bind(null, data)}>
                  <Text style={AppStyles.navItemText}>
                    {data.name}
                  </Text>
                </TouchableHighlight>
              </View>
            );
          }}
        />
      </ScrollView>
    );
  }
});

The _navigationMenu array is just a list of objects with a name, and a React component to render.

Answer 1

There isn't too much documentation for ReactJs yet, bu this fixed the problem for me. Adding a configureScene prop to the Navigator where gestures is empty object will prevent the Navigator from applying any sort of default gesture navigation.

render() {
    return (
        <Navigator
          initialRoute={{ component: LocalExpenseDisplay, name:'Home',  index: 0}}
          renderScene={this._renderScene}
          configureScene={() => ({ ...Navigator.SceneConfigs.FloatFromBottom, gestures: {}})}
        />
    );
}