Monaca Onsen UI Discord Chat Github Repo

After adding <Splitter> menu, Back button is not showing up in next navigated Page



  • @jabidof Hmm, well definitely shows 2 pages and 2 routes, so, I don’t know. Apologies for not knowing more about react.



  • @munsterlander
    Some news… I added a button in the toolbar whose action is

    onClick={() => navigator.popPage()}
    

    Here is the result in the console:
    0_1484594896522_Capture d’écran 2017-01-16 à 20.28.01.png

    I’m puzzled… This shows that there is a Navigator instance “somewhere” that is not the one I believe i’m using.
    How can I further debug this?

    Thanks for any help.
    J.



  • @munsterlander @Fran-Diox
    I’m able to supply full code that shows the issue. The code is based on @argelius code https://github.com/argelius/react-onsenui-redux-weather
    I made a tiny change by adding the side menu Splitter component and the above described behavior happens.

    It is now clear that there is a BUG in the REACT side menu Splitter component.

    Would this help in the debug process?

    Thanks
    J.



  • @jabidof Yes, if you can post all your code or a github, I will take a look at it. Just understand, I am not a react guy so I can only really look at the Onsen bits.


  • Onsen UI

    @jabidof What’s the order of the routing components? I think the Splitter should be the parent of Navigator for this to work. Splitter > SplitterContent > Navigator. Is that correct?



  • @Fran-Diox @munsterlander

    in main index.js:

    ...
    render(
      <AppContainer>
        <Provider store={store}>
          <App />
        </Provider>
      </AppContainer>,
      rootElement
    ))
    ...
    

    in App.js:

    ...
    const renderPage = (route, navigator) => (
      <route.component key={route.key} navigator={navigator} />
    );
    
    const App = () => (
      <Navigator
    		key='TOTO'
        renderPage={renderPage}
        initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
      />
    );
    ...
    

    Finally the MainPage.js:

    ...
    const MainPage = ({navigator, splitterOpen, actions}) => (
    	<Splitter>
    		<SplitterSide
    			style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
    			side='left'
    			width={250}
    			collapse={true}
    			isSwipeable={true}
    			isOpen={splitterOpen}
    			onClose={() => actions.splitterSetClose()}
    			onOpen={() => actions.splitterSetOpen()}
    		>
    			<Page>
    				<List
    					dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}]
    					}
    					renderRow={(menu) => (
    					<ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem>
    					)}
    				/>
    			</Page>
    		</SplitterSide>
    		<SplitterContent>
    			<Page renderToolbar={() => <NavBar title='Onsen Weather' navigator={navigator} />}>
    				<LocationList navigator={navigator} />
    				<AddLocation />
    			</Page>
    		</SplitterContent>
    	</Splitter>
    );
    ...
    

    J.



  • I just tried this in App.js:

    ...
    const App = ({splitterOpen, actions}) => (
    	<Splitter>
    		<SplitterSide
    			style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
    			side='left'
    			width={250}
    			collapse={true}
    			isSwipeable={true}
    			isOpen={splitterOpen}
    			onClose={() => actions.splitterSetClose()}
    			onOpen={() => actions.splitterSetOpen()}
    		>
    			<Page>
    				<List
    					dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}]
    					}
    					renderRow={(menu) => (
    					<ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem>
    					)}
    				/>
    			</Page>
    		</SplitterSide>
    		<SplitterContent>
    		<Navigator
    			key='TOTO'
    			renderPage={renderPage}
    			initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
    		/>
    		</SplitterContent>
    	</Splitter>
    );
    ...
    

    And the back button now appears.
    I think this should be added to the doc.
    I’ll update my own code later and let you know the outcome.
    J.



  • @Fran-Diox @Onsen-UI
    That was it! Thanks for the input!

    As I said, I spent few hours digging into this. I’d be happy for the community to find this info in the React DOC (which is already excellent!).

    J.


  • Onsen UI

    @jabidof I supposed that could be the case. I mentioned this when writing the docs but perhaps it should be more extense:

    Notice that loading new content in any of these frames will completely remove the previous loaded content. For more complex navigation consider nesting <ons-navigator> inside <ons-splitter-content>.

    Basically, in your example your Navigator always has 1 child, the Splitter. You are changing the content of the Splitter but that does no affect the Navigator stack.

    Glad it was helpful!



  • @Fran-Diox
    I’m hitting some (maybe basic) issue. You mentioned before that the the Splitter should be the parent of Navigator for this to work. But then, how can I pass the APP Navigator instance to the Page within the SplitterSide component?

    Am I missing something simple?

    J.