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

Bug Reports
1

Hi,

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:

main.ux

<App>
	<JavaScript File="main.js" />

	<DockPanel>


    	<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"/>
			<Clicked>
				<Callback Handler="{myFunction}"/>
			</Clicked>

		</Panel>

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

		<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">

					<Clicked>
						<Callback Handler="{onPanelClicked}"/>
					</Clicked>

				</Rectangle>

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

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

	</DockPanel>




</App>

main.js

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(){
	console.log("show");

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

}


function onPanelClicked(){
	console.log("onPanelClicked")
	showBottom.value=false;
}

function uxMapOnMapMarkerTapped(){

}

module.exports = {

	uxMapPageMapMarkers: uxMapPageMapMarkers,
	uxMapOnMapMarkerTapped: uxMapOnMapMarkerTapped,

	uxMapPageZoom: uxMapPageZoom,

	uxMapPageLat: 				uxMapPageLat,
	uxMapPageLng: 				uxMapPageLng,

	loadingClockBool: loadingClockBool,

	showBottom: showBottom,

	myFunction: myFunction,
	onPanelClicked: onPanelClicked

}