@emccorson thanks for the information! I had been trying to use material.io, fonts.google.com and materialdesignicons.com with no luck. Guess “material design” isn’t really specific to one vendor, and of course, not cross compatible.

Thank you for your answer. The problem is still here. For information, prechange event is triggered two times when I enter in fullscreen and one time when I leave fullscreen. Another information is that apparently, the problem appears only in iOS.

@CsLaci Perhaps you can use a <ons-modal animation="lift"> for your use case.

@phyllito In that tutorial you linked, you can update the code to look like this: <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable animation="push"> And then click Run to see if this is what you want. Per the documents here: https://onsen.io/v2/api/js/ons-splitter-side.html The splitter side now has 3 animations: animation - Specify the animation. Use one of overlay, push, reveal or default. Try those options to get what you want for your project.

@Fran-Diox Think you’re right. I’ll just park the tab bar at the bottom on Android. Little strange, but probably not as strange as what I was originally envisioning. Thanks for the help!

The answer from here worked for me to solve this exact warning: https://github.com/OnsenUI/react-onsenui/issues/107 You need to add the key property to both content and tab, like this: { content: <MyTab title="Settings" key={2} />, tab: <Ons.Tab label="Settings" key={2} /> } This solved the warning for me.

@ephraimt @munsterlander I am not sure that this demo actually works the way it is described. The initial active tab is being set correctly through index. However, if you setState in the prechange to always be index 0 you can still swap between the tabs. In my application I can get the tabbar to be a “controlled” component, it always selects the tab you click. This looks like it is happening on the internal onClick method of ons-tabbar that is overriding the setActiveTab method in the React component.

@tbrcrl As the others mentioned we aren’t sure if and when a feature like this may be added to the core. In the meantime feel free to use something like this. It’s just a basic demo showing some minor tweaks in classes and styles. It may depend on your app, but I think something like it should be sufficient for most basic cases. Looking at the behaviour of skype and youtube android apps it seems there are minor differences. In both you can actually drag the toolbar between being shown or not and when you stop dragging it chooses its preferred state. To implement the dragging part you would need to listen for start, movement and end of the drag. So in order to keep things relatively simple I omitted that logic and only made 2 states with a small transition between them. As for hiding the tabbar menu - in both apps the tabs would always persist regardless of the circumstances, so maybe you shouldn’t try to hide yours. If you still want to the logic would be similar to what is shown in the upper example. Also the example shows js logic on the scroll event - if you just want a simple solution without any code in which the toolbar scrolls as if it’s part of the content then you can just add the attribute inline to it and you’re good to go.