Drawer Menu in react-native-router-flux does not show anything

Question

I want to have a side menu in react-native using flux. However, it does not show anything.

App.js

const App = () => {
    return (
        <Router>
            <Scene key="root">
                <Scene
                    key="LoginScreen"
                    component={LoginScreen}
                    initial
                />
                <Scene
                    key="CodeValidationScreen"
                    component={CodeValidationScreen}
                />

                <Scene
                    key="ProfileScreen"
                    component={ProfileScreen}
                />

                <Scene
                    key="RegisterScreen"
                    component={RegisterScreen}
                />

                <Scene
                    key="CarsListScreen"
                    component={CarsListScreen}
                />

                <Scene
                    key="CarViewScreen"
                    component={CarViewScreen}
                />

                <Scene contentComponent={NavigationDrawer} drawer  key="drawer">
                    <Scene key="main">
                        <Scene
                            key="LogoutScreen"
                            component={LogoutScreen}
                        />
                    </Scene>
                </Scene>
            {/*<Scene key="drawer"  contentComponent={SideMenu} drawerPosition='right'>*/}
                {/*<Scene key="main" >*/}
                    {/*<Scene*/}
                        {/*key="home"*/}
                        {/*component={LoginScreen}*/}
                        {/*title="Home"*/}
                        {/*initial*/}
                    {/*/>*/}
                {/*</Scene>*/}
            {/*</Scene>*/}
            </Scene>

        </Router>
    )
};

index.js:

AppRegistry.registerComponent('sidemenu', () => App);

Drawer.js

export default class NavigationDrawer extends Component {
    constructor(props) {
        super(props);
    };
    render(){
        const state = this.props.navigationState;
        const children = state.children;
        return (
            <Drawer
                ref="navigation"
                open={state.open}
                onOpen={()=>Actions.refresh({key:state.key, open: true})}
                onClose={()=>Actions.refresh({key:state.key, open: false})}
                type="displace"
                content={<SideMenu />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                tweenHandler={(ratio) => ({
                    main: { opacity:Math.max(0.54,1-ratio) }
                })}>
                {this.props.children[0]}
                {/*<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />*/}
            </Drawer>
        );
    }
}

SideMenu.js

export default class SideMenu extends Component<{}> {
    constructor(props) {
        super(props);

    };

    render() {
        return (
            <View style={styles.container}>
                <Text>menu items go here</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        backgroundColor: '#F5FCFF',
        paddingRight: 20,
        paddingLeft: 20,
        paddingBottom: 10,
    },

});

showDrawer function (when I click on a button, I expect SideMenu shows. ):

_showDrawer  = () => {
    return () => {
            Actions.refresh({key: 'drawer', open: true });
};

This is all of my code. I can navigate between screens, however, side menu doesn't work. What is my mistake?

Answer 1

   <Router>
        <Scene>
            <Scene
                key="login"
                component={LoginScreen}
                initial
                type="reset"
            />
            <Scene
                key="registerScreen"
                component={RegisterScreen}
            />

            <Scene
                key="codeValidationScreen"
                component={CodeValidationScreen}
            />

            <Drawer
                hideNavBar
                key="drawerMenu"
                contentComponent={SideMenu}
                drawerWidth={250}
                drawerPosition="right"
            >
                <Scene
                    key="profileScreen"
                    component={ProfileScreen}

                />
                <Scene
                    key="carsListScreen"
                    component={CarsListScreen}
                />

                <Scene
                    key="carViewScreen"
                    component={CarViewScreen}
                />

            </Drawer>
        </Scene>

    </Router>);

And:

Actions.drawerMenu(params)

And there is no need to Drawer.js