Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

React-Onsen: Navigator inside Splitter

  • Hello,

    I have been trying a hand moving my app to React Onsen but I have hit a wall on how to properly have the Splitter have access to the Navigator:

    Here bellow is the entry point for my app:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Navigator, Splitter, SplitterSide, SplitterContent } from 'react-onsenui';
    import { Menu } from './components';
    import { store, closeMenuActionCreator, openMenuActionCreator } from './store';
    import { routes } from './routes';
    const el = React.createElement;
    class App extends React.Component {
        constructor(props) {
            this.state = { hasError: false, menuOpened: false, initialRoute: routes.home };
            this.setStateFromStore = this.setStateFromStore.bind(this);
            this.renderPage = this.renderPage.bind(this);
            this.closeMenu = this.closeMenu.bind(this);
            this.openMenu = this.openMenu.bind(this);
        componentWillMount() {
            this.unsubscribe = store.subscribe(() => {
        componentWillUnmount() {
        componentDidMount() {
            document.addEventListener('deviceready', () => {
                console.log("Cordova is ready");
            }, false);
        componentDidCatch(error, info) {
            this.setState({ hasError: true });
            console.error(error, info);
        setStateFromStore() {
            const state = store.getState();
                initialRoute: state.nav.initialRoute
        closeMenu() {
        openMenu() {
        renderPage(route, navigator) {
            route.props = route.props || {};
            route.props.navigator = navigator;
            return el(route.component, route.props);
        render() {
            let content;
            if (this.state.hasError)
                content = el('p', null, "App Crashed!");
                content = el(Navigator, { initialRoute: this.state.initialRoute, renderPage: this.renderPage });
            return el(Splitter, null,
                el(SplitterSide, {
                    side: "left",
                    width: 300,
                    collapse: "(max-width: 768px)",
                    isOpen: this.state.menuOpened,
                    onClose: this.closeMenu,
                    onOpen: this.openMenu
                el(SplitterContent, null, content)
    ReactDOM.render(el(App), document.getElementById('app'));

    After banging my head against this code for a while the best I could get to was to have the ‘initialRoute’ of Navigator be reset by Redux, so that the Splitter menu items could simply fire an action containing the new route. But this does nothing…

    I did try moving the Splitter down to inside the Navigator and part of each Page I create, but this broke animation and started causing duplicate key errors inside Navigator when moving back and forth between the menu items in the Splitter.

    This seems like a relly basic app feature to be so damn hard to implement in Onsen, so I can use any help you can give.

    Thank you.

  • Onsen UI

  • I was so close… Thank you so much for this!