I’m trying to reproduce the behaviour of Google Maps App “explore” sheet that can be swipe from bottom to up.
I tried to use the sheet component but it seems to be on top of other components such as the toolbar.
My goal is to reduce the size of the page content but keep the “sheet” within the page content and not overlap it.
I think i can achive this behaviour with a custom component.
I’m using react and I’m trying to handle touchStart and touchMove events of a div… without succes.
This is my render function:
render() {
return (
<Page name="home">
<Navbar title="Home Page" />
<div id="map" style={{ width: '100%', height: 'calc(100% - ' + this.state.mapDivider + 'px' }}></div>
<div id="info" style={{ width: '100%', height: this.state.mapDivider + 'px', backgroundColor: 'red' }} onTouchStart={this.touchStart}>
</div>
</Page>
);
}
My problem now is that the onTouchStart
event is never fired.