React-native-router-flux: Drawer seems to break everything?

Created on 29 Jun 2016 · 2Comments · Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

react-native-router-flux: ^3.30.0
react-native-drawer: ^2.2.3
react-native: ^0.25.1

Expected behaviour

The drawer to work and launch properly and not disturb the rendering of other elements.

Actual behaviour

The drawer prevents the apropriate rendering of a custom navBar component in addition to silently preventing the launching of other scenes.

Steps to reproduce

Create a drawer.
Custom navbar will disappear and scenes will not launch.

Here is my drawer implementation, MaterialDrawer.js:

...
render() {
    let navigationState = this.props.navigationState;

    let NavigationButton = MKButton.coloredFlatButton()
        .withBackgroundColor(MKColor.Transparent)
        .withRippleColor(veryTransparent(MKColor.Orange))
        .withMaskColor(veryTransparent(MKColor.Orange))
        .withStyle({
            borderRadius: 0,
        })
        .build();

    let DrawerPanel =  (
        <View style={styles.container}>
            ...
        </View>
    );

    return (
        <Drawer
            ref="navigation"
            type="overlay"
            content={DrawerPanel}
            open={navigationState.open}
            tapToClose={true}
            onOpen={() => Actions.refresh({key:navigationState.key, open: true})}
            onClose={() => Actions.refresh({key:navigationState.key, open: false})}
            onOpenStart={() => StatusBar.setBarStyle('default', true)}
            onCloseStart={() => StatusBar.setBarStyle('light-content', true)}
            openDrawerOffset={0.31}
            panCloseMask={0.2}
            closedDrawerOffset={0}
            styles={{
                drawer: {
                    shadowRadius: 3,
                    shadowOffset: {
                        width: 0,
                        height: 6,
                    },
                    shadowOpacity: 0.23,
                    shadowColor: 'black',
                    elevation: 6,
                    backgroundColor: 'white',
                }
            }}
            elevation={6}
            tweenHandler={
                (ratio) => ({
                    main: {
                        opacity:(2-ratio)/2,
                    }
                })
            }
        >
            <DefaultRenderer navigationState={navigationState.children[0]} onNavigate={this.props.onNavigate} />
        </Drawer>
    );
}
...

index.js with all the scene declarations:

...
render() {
    return (
        <Router>
            <Scene key="root">
                <Scene key="landing" hideNavBar={true} component={Landing} title="Loading..." type="replace"/>
                <Scene key="loggedOut" hideNavBar={true} component={LoggedOut} title="Sign in/up" type="replace"/>
                <Scene key="enterCCInfo" hideNavBar={true} direction="vertical">
                    <Scene key="getCC" component={CreditCardEntry} title="Enter your card info"/>
                </Scene>
                <Scene key="drawer" component={MaterialDrawer}>
                    <Scene key="loggedIn" component={LoggedIn} title="Logged in" hideNavBar={true} initial={true} type="replace"/>
                    <Scene key="createSession" direction="vertical" hideNavBar={true}>
                        <Scene key="sessionDetailSelector" component={SessionDetailSelector} initial={true} title="Schedule a session"/>
                        <Scene key="sessionConfirm" component={SessionConfirm} title="Everything look right?"/>
                        <Scene key="sessionReciept" component={SessionReceipt} title="We'll see you then"/>
                    </Scene>
                </Scene>
            </Scene>
        </Router>
    );
}
...

Trying to call Actions.KEY_NAME from a scene contained in the drawer will not fire no matter how I modify the call. However something is definitely called as calling a KEY_NAME that does not exist will fail and error.

Source