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?

score 3 · Accepted Answer · answered Jan 23 '18 at 14:21

   <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

getting **There is no route defined for key `dashboard`. Must be one of: 'A','B','C','drawerMenu'**. Here is my [main navigation js](https://hastebin.com/nuzihazobu.cs) file, and [Sidemenu.js](https://hastebin.com/epusahelic.js). Please guide, whats the issue here in the code? [Screenshot](https://i.stack.imgur.com/mzE13.png) of my error. — Narendra Singh, May 22 '18 at 15:13
@salvishahzad When I want to navigate to Drawer, I call **Actions.drawerMenu(params)** — Amir Shabani, Mar 10 '19 at 12:46

score 1 · Answer 2 · answered Dec 28 '19 at 11:39

1

Make sure all the Scene and Stack comes under Drawer where you wanna see drawer menu.

answered Dec 28 '19 at 11:39

Harat

1,340
1
17
20

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

2 Answers2