Showing panel on top of map - panel not clickable on android


when showing a panel on the top of a map in Android it does not behave as it does in local/iOS

Fuse 1.8
Android 6.0.1

To reproduce (android):

1.- click on the top panel to show the bottom panel (check that it moves overlaying the bottom bar)
2.- click on the bottom panel that just appeared (check that “nothing happens”)
3.- drag the bottom panel and the map moves
4.- click again on the top panel to hide the bottom panel (again check that it moves overlaying the bottom bar)

So the problems are:

1.- Panel is not clickable: actually when u drag the panel the map moves (that one is more important as #2 can be work-arrounded)

2.- The “moving” animation shows on top of the bottom bar

here u have the code:


	<JavaScript File="main.js" />


    	<StatusBarBackground Background="#ff0000" Dock="Top"/>
    	<iOS.StatusBarConfig Style="Light"/>

    	<BottomBarBackground IncludesKeyboard="false" Dock="Bottom"/>

		<Panel Dock="Top" Background="#ff0000" Height="60" HitTestMode="LocalVisualAndChildren">
			<Text Value="Click here to show/hide panel" Alignment="VerticalCenter" TextAlignment="Center"/>
				<Callback Handler="{myFunction}"/>


		<Panel Dock="Bottom" Background="#ff0000" Height="40" HitTestMode="LocalVisualAndChildren">
			<Text Value="Bottom bar" Alignment="BottomCenter" TextAlignment="Center"/>

		<Panel Background="#00ff00" ClipToBounds="true">

			<NativeViewHost ux:Name="NativeView" ClipToBounds="true">

				<Rectangle ux:Name="bottomBar" Fill="#ffffff" CornerRadius="10,10,0,0" Height="80" Alignment="Bottom" HitTestMode="LocalBoundsAndChildren">

						<Callback Handler="{onPanelClicked}"/>


            	<MapView Latitude="{uxMapPageLat}" Longitude="{uxMapPageLng}" ShowMyLocation="true" Zoom="{uxMapPageZoom}" MarkerTapped="{uxMapOnMapMarkerTapped}" ShowMyLocationButton="true"> 
                	<Each Items="{uxMapPageMapMarkers}">
                    	<MapMarker Latitude="{lat}" Longitude="{lng}" Label="{name}"/> 

        	<WhileFalse Value="{showBottom}">
				<Move Target="bottomBar" RelativeTo="Size" Y="1" Duration="0.6"/>




var Observable 	= require("FuseJS/Observable");

var uxMapPageMapMarkers = Observable();
var uxMapPageLat = Observable(41.35967);
var uxMapPageLng = Observable(2.10028);
var uxMapPageZoom = Observable(10);
var showPanel = Observable(false);

var showBottom = Observable(false);

var loadingClockBool = Observable(false);

function myFunction(){

	if (showBottom.value==true) {
	} else {


function onPanelClicked(){

function uxMapOnMapMarkerTapped(){


module.exports = {

	uxMapPageMapMarkers: uxMapPageMapMarkers,
	uxMapOnMapMarkerTapped: uxMapOnMapMarkerTapped,

	uxMapPageZoom: uxMapPageZoom,

	uxMapPageLat: 				uxMapPageLat,
	uxMapPageLng: 				uxMapPageLng,

	loadingClockBool: loadingClockBool,

	showBottom: showBottom,

	myFunction: myFunction,
	onPanelClicked: onPanelClicked