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

[munsterlander]

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

[jabidof]

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

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

Here is the result in the console:

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.

[jabidof]

@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.

[munsterlander]

@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.

[Fran Diox]

@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?

[jabidof]

@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.

[jabidof]

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.

[jabidof]

@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.

[Fran Diox]

@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!

[jabidof]

@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.