React-native-router-flux: How to customize drawer button in routerFlux 4.0

[bkniya]

I open new issue related with #1078
but in the routerFlux 4.0

In Drawer component:
componentDidMount() { Actions.refresh({key: 'drawer', ref: this.refs.navigation}); }

In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}

i can't use this :|
get this error:
_reactNativeRouterFlux.Actions.get is not a function

"react": "16.0.0-beta.5",
"react-native": "0.49.1",
"react-native-router-flux": "^4.0.0-beta.21"

[daviscabral]

In the version 4 you don't actually need to do it. You can actually just call actions Actions.drawerOpen or Actions.drawerClose.

[bkniya]

Thank you for the answer
it works fine @daviscabral

[yasinugrl]

hey @daviscabral can you help me?

I can add this line in Button componenet

const sidebarButton = () => {
    return (
      <TouchableHighlight
        onPress={() => { Actions.drawerOpen(); }} underlayColor="black"
      >
          <Image
          style={styles.menuIconStyle}
          source={
            require('./Menu/menu.png')}
          />
       </TouchableHighlight>
    );
};

but it is not work for me. Menu is not open. I add NavigationDrawer componenet.
How can I fix it?

class NavigationDrawer extends React.Component {
  componentDidMount() {
    Actions.refresh({ key: 'test', ref: this.refs.navigation });
  }

  render() {
    const state = this.props.navigationState;
    const children = state.children;
    return (
      <Drawer
        ref="navigation"
        type="displace"
        onOpen={() => Actions.refresh({ key: state.key, open: true })}
        onClose={() => Actions.refresh({ key: state.key, open: false })}
        content={<MenuItems />}
        tapToClose
        openDrawerOffset={0.4}
        // panCloseMask={0}
        // negotiatePan
        tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio), transforMatrix: 0.5 },
        })}
      >
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    );
  }
}

[bkniya]

@yasinugrl can you put your router here and say react-native version ?

[yasinugrl]

"react-native": "0.49.3",

const RouterComponent = () => {
  return (
    <Router
        navigationBarStyle={styles.navBar}
        titleStyle={styles.navTitle}
        createReducer={reducerCreate}
    >
          <Scene key="Main" component={NavigationDrawer}>
            <Scene
                sceneStyle={styles.mainScreen}
                key="MainTap"
                component={Home}
                renderLeftButton={sidebarButton}
                renderRightButton={rightButton}
                renderTitle={() => { return <AppLogo />; }}
                inital
                type="replace"
                // title="Öğrenci Listesi"
            />


          </Scene>
  </Router>
    );
};

[bkniya]

I also new in router-flux but why your router not have key = "root"
Could this be the source of the problem?
"react": "16.0.0-beta.5",
"react-native": "0.49.1",
"react-native-router-flux": "^4.0.0-beta.21"

[yasinugrl]

can you share with me your Router file for drawer button? @bkniya

[bkniya]

<Router key="root"> <Drawer key="drawer" contentComponent={MenuPage}> <Overlay> <Modal hideNavBar> <Lightbox> <Stack hideNavBar > <Scene key="firstLoad" component={FirstLoad} title="Please Login" initial /> <Scene key="startApp" component={StartApp} title="Start app" panHandlers={null}/> <Scene key="signUp" component={SignUp} title="Please Sign up" panHandlers={null}/> <Scene key="login" component={Login} title="Please Login" panHandlers={null}/> <Scene key="forgetPassword" component={ForgetPassword} title="Forget password" panHandlers={null}/> </Stack> </Lightbox> <Stack hideNavBar > <Scene key="testPage" component={TestPage} title="Species List" /> <Scene key="observationNewRoot" component={ObservationNewRoot} title=" Observation Root" panHandlers={null}/> </Stack> </Modal> </Overlay> </Drawer> </Router>
and this is my button for open Drawer

<TouchableOpacity onPress={()=>{Actions.drawerOpen()}}> </TouchableOpacity>

[yasinugrl]

Actually this is very different my code. Can you share router.js file for me. I dont know Drawer Modal Lightbox Stack Component import where?

[daviscabral]

Hey guys, sorry - I was a bit busy lately. You should import those components from RNRF, so you can use them the way @bkniya used.

It seems you cannot open your drawer, cause it is not being loaded in the right way. Instead, use the Drawer one.

By the way, are you using v3 or v4? This way that you are using, makes me think that you are mixing v3 and v4.

[yasinugrl]

Hi everyone,
Can you know that how to set openDrawerOffset with Drawer componenet in v4