I cannot use together with 'react-native-drawer'

[efkan]

Hello,

Although there is an example regarding my issue, I cannot implement react-native-router-flux by using react-native-drawer.

#92 (comment)

The initial screen appears. However the side menu never show by sliding. I'm sure that I did wrong something. Somehow I couldn't find out.

Is there any chance to find out what is wrong with my code?

SideDrawer.js

import React, { Text, View, } from 'react-native';
import Drawer from 'react-native-drawer';

var SideDrawerContent = () => {
    return(
        <View>
            <Text>{"Page one"}</Text>
            <Text>{"Page two"}</Text>
        </View>
    )
};

class SideDrawer extends React.Component {

  render() {
    return (
            <Drawer
        type="overlay"
        content={<SideDrawerContent />}
        tapToClose={true}
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        closedDrawerOffset={-3}
                styles={{ drawer: drawerStyles }}
        tweenHandler={(ratio) => ({ main: { opacity: (2 - ratio) / 2 } })}
      >
        {React.Children.map(this.props.children, c => React.cloneElement(c, {
          route: this.props.route
        }))}
      </Drawer>
    )
  }

}

var drawerStyles = {
    drawer: { backgroundColor: '#ffffff' },
    main: { paddingLeft: 3 }
};

MyMainView.js

import React, { View, Text, StyleSheet, Component, } from 'react-native';

export default class MyMainView extends Component {

  render(){
    return (
      <View>
                <Text>MyMainView.js</Text>
      </View>
    )
  }

}

Router.js

import React, { Text, Navigator, Platform, StyleSheet, Component } from 'react-native'

import {Router, Route, Schema, Animations, TabBar} from 'react-native-router-flux'

import SideDrawer from './SideDrawer';
import MyMainView from './MyMainView';
import Page1 from './Page1';
import Page2 from './Page2';

const hideNavBar = Platform.OS === 'android'
const paddingTop = Platform.OS === 'android' ? 0 : 8

export default class Routes extends Component {
  render() {
    return (
      <Router>
        <Schema
          name='boot'
          sceneConfig={Navigator.SceneConfigs.FadeAndroid}
          hideNavBar={true}
          type='replace'
        />
        <Schema
          name='main'
          sceneConfig={Navigator.SceneConfigs.FadeAndroid}
          hideNavBar={hideNavBar}
        />

        <Route schema='boot' component={MyMainView} name='session' initial={true} />

        <Route name='main' hideNavBar={false} type='reset'>
          <SideDrawer>
            <Router
              sceneStyle={styles.routerScene}
              navigationBarStyle={styles.navBar}
              titleStyle={styles.navTitle}
            >
              <Route schema='main' component={Page1} name='Page1' title='Page1' />
              <Route schema='main' component={Page2} name='Page2' title='Page2' />
            </Router>
          </SideDrawer>
        </Route>

      </Router>
    )
  }
}

index.android.js

 var React = require('react-native');
 var {
   AppRegistry,
   Text,
   View,
     Navigator,
 } = React;

import SideDrawer from './SideDrawer';
import MyMainView from './MyMainView';
import Page1 from './Page1';
import Page2 from './Page2';

import Router from './Router';

export default class reactNativeRouterFluxSample extends React.Component {

    render() {
        return (
            <Router />
        )
    }

}

AppRegistry.registerComponent('reactNativeRouterFluxSample', () => reactNativeRouterFluxSample);

[ws3li]

I had the same problem and then I finally figure it out.
I am not sure if it is same the as yours.

In SideDrawer.js add this line at the end:
modules.exports = SideDrawer;

[ws3li]

I ran into another problem, I wonder if someone could help me out:

Looking at the same scenario above: in Router.js
How can I add another <Route> that is not part of the <SideDrawer>.

If I add a Route say,
<Route name='NoDrawerPage' component={Page2} title='Page2' /> outside of <Route name='main' ...>, shown below:

<Router>
  <Route name="main" hideNavBar={false} type="reset">
    <SideDrawer>
      <Router >
        <Route schema="main" component={Page1} name="Page1" title="Page1" />
      </Router>
    </SideDrawer>
  </Route>

  <Route name="NoDrawerPage" component={Page2}  title="Page2" />

</Router>

When I navigate from {Page 1} to {Page 2}, for some reason I loose the navigationbar styles/buttons when pressing the back button or swiping back.

Any idea on how to fix this?

Thanks.

[efkan]

You're right! I didn't export anything. (module.exports = SideDrawer or export default class SideDrawer... so I had to have a break)

Thanks to you, I could overcome the first issue.

If I have Router.js run, I'll review your issue too...

[efkan]

@ws3li ,

Probably as you know, in the code above, schema attribute of the route tags define <schema> tag names that are container for the common attributes.

<Route schema="main"... /> is related with <Schema name="main"...

If you might write your code I can review it.