Change Tabbar height conditionally in React

tfu

Hi, I’m creating a bottom navigation using Tabbar in React-onsenui. How do I change the Tabbar height when running in iOS, otherwise the default height? Thank you in advance for any suggestions.

tfu

I did find out that I can modify onsen-css-components.css file for tabbar height:

.tabbar {
font-family: -apple-system, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘Lucida Grande’, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
white-space: nowrap;
margin: 0;
padding: 0;
height: 65px;
background-color: #212121;
border-top: 1px solid #0d0d0d;
width: 100%;
}

The bottom nav bar height will change. But I need to do this only for iOS. How to achieve this?

emccorson

One way would be to check in JavaScript whether the platform is iOS with ons.platform.isIOS and then set a CSS class that contains the height rule that way.

There is probably a way to do it in CSS as well but I can’t think of it off the top of my head right now.

https://onsen.io/v2/api/js/ons.platform.html#method-isIOS