React, onTouchStart doesn't work on DIV jsx

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.

It is not related to F7. You have a plain DIV element. If it doesn’t work make sure:

  • you don’t have errors in console
  • you are checking it on real ios/android device, ios/android emulator, or ios/android emulation in Chrome

Thank you for your help.

I haven’t errors on console and I’m just working on web application so I’m checking it on Chrome.
Other touch-related events works, only the touch event on elements inside tab content doesn’t works (like my div).