# Blank screen!

**URL:** <https://forums.fusetools.com/t/blank-screen/4173>\
**Category:** Bug Reports\
**Created:** [March 1, 2016, 3:27pm UTC](https://forums.fusetools.com/t/blank-screen/4173 "2016-03-01T15:27:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [March 1, 2016, 3:27pm UTC](https://forums.fusetools.com/t/blank-screen/4173/1 "2016-03-01T15:27:35Z")

</div>

Hi I have a strange problem. When I trigger a function that navigate to other page and load a `WebView` the app goes to a blank a screen but only when I test it with the apk file on my device. When I test it with dinamic preview on my device work fine.

(Only I test it on Android)

I reproduce the error in this code:

The UX:

```auto
<App Theme="Basic" Background="#fff">
    <JavaScript File="MainView.js" />
    <DockPanel>
        <StatusBarBackground Background="#000" Dock="Top"/>
        <BottomFrameBackground Dock="Bottom"/>    

        <DirectNavigation ux:Name="_nav" Active="Menu" />
        <Style>
            <Page>
                <ExitingAnimation>
                    <Move Y="2" RelativeTo="Size" Duration="1" Easing="ExponentialInOut" />
                </ExitingAnimation>
            </Page>
        </Style>

        <Page ux:Name="Menu">
            <StackPanel>
                <Each Items="{OfertaE}">
                    <Rectangle Height="100." Margin="0,0,0,8" Background="#eee" >
                        <Clicked Handler="{irOfertaEspecial}">
                            <NavigateTo NavigationContext="_nav" Target="Webview" Delay="0.5" />
                            <Toggle Target="ColorHeaderWebView" />
                        </Clicked>
                        <DockPanel>
                            <Image StretchMode="UniformToFill" Url="{Imagen}" Height="100." Width="100." Dock="Left" />
                            <Panel Margin="20,0,20,0">
                                <StackPanel Alignment="VerticalCenter">
                                    <Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="18" Value="{Titulo}" />
                                    <Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="12" Value="{Texto}" />
                                </StackPanel>
                            </Panel>
                        </DockPanel>
                    </Rectangle>
                </Each>
            </StackPanel>
        </Page>
        <!-- WEBVIEW -->
        <Page ClipToBounds="true" ux:Name="Webview" Background="#000">
            <WhileTrue ux:Name="ColorHeaderWebView" >
                <Change circuloTopWebview.Width="800" Duration="1" DurationBack="0.5" Delay="1.2" DelayBack="1" Easing="ExponentialInOut" />
                <Change circuloTopWebview.Height="800" Duration="1" DurationBack="0.5" Delay="1.2" DelayBack="1" Easing="ExponentialInOut" />
                <Move Target="SubMenuWebView" Y="10" RelativeTo="Size" Delay="1.3" DelayBack="0" Duration="1" Easing="ExponentialInOut" />
                <Move Target="PanelWebview" Y="-8" RelativeTo="Size" Delay="2" DelayBack="0" Duration="1" Easing="ExponentialInOut" />
            </WhileTrue>

            <DockPanel>
                <Panel ClipToBounds="true" Dock="Top" Height="50.">
                    <Image Height="45%" Alignment="Right" Margin="0,0,12,0" File="Assets/close.png">
                        <Clicked>
                            <NavigateTo NavigationContext="_nav" Target="Menu" Delay="0.5" />
                            <Toggle Target="ColorHeaderWebView" />
                        </Clicked>
                    </Image>
                    <Text Value="{TituloHeaderWebView}" TextColor="#fff" TextAlignment="Center" Alignment="VerticalCenter" />
                    <Circle MaxWidth="1000%" Width="0%" Fill="{ColorHeaderWV}" ux:Name="circuloTopWebview" />
                </Panel>
                <Panel Background="#888" Dock="Top" ux:Name="SubMenuWebView" Height="40.">
                    <Translation Y="-10" RelativeTo="Size" />
                    <Image Height="25." Alignment="Left" Margin="12,0,0,0" File="Assets/back.png">
                        <Clicked Handler="{IrLinkActivo}" />
                    </Image>
                </Panel>
                <Panel ux:Name="Loading" Visibility="Collapsed" >
                    <Circle Alignment="VerticalCenter" Height="40." Width="40." StartAngleDegrees="0" LengthAngleDegrees="0" Margin="10" ux:Name="LoadingCircle">
                        <Stroke Width="4">
                          <SolidColor Color="#2b6572" />
                        </Stroke>
                    </Circle>

                    <WhileTrue Value="{ActivarLoading}">
                        <Cycle Target="LoadingCircle.LengthAngleDegrees" Low="0" High="359.99" Frequency="0.8" />
                        <Spin Target="LoadingCircle" Frequency="-1.8" />
                        <Change Target="Loading.Opacity" Value="1" Duration="0.5" Easing="CircularOut" />
                        <Change Target="Loading.Visibility" Value="Visible" />
                    </WhileTrue>  
                </Panel>
                <Panel ux:Name="PanelWebview" Visibility="Collapsed">
                    <Translation Y="8" RelativeTo="Size" />
                    <NativeViewHost>
                        <PageLoaded>
                            <Callback Handler="{DesactivarLoadingWV}" />
                        </PageLoaded>
                        <WebView ux:Name="Webview" Url="{urlWV}">
                            <PageLoaded>
                                <Set PanelWebview.Visibility="Visible" />
                            </PageLoaded>
                        </WebView>
                    </NativeViewHost>
                </Panel>
            </DockPanel>
        </Page>
    </DockPanel>
</App>

```

The JS:

```auto
var Observable = require('FuseJS/Observable');
var storage = require('FuseJS/Storage');

var ColorHeaderWV = Observable("#ff6400");
var TituloHeaderWebView = Observable("");
var urlWV = Observable("http://");
var ActivarLoading = Observable(false);
var LinkActivo = "";

var data = Observable();
var OfertaE = Observable();

function Oferta(Titulo, Texto, Imagen, Url) {
    this.Titulo = Titulo;
    this.Texto = Texto;
    this.Imagen = Imagen;
    this.Url = Url;
}

var status = 0;
var response_ok = false;

fetch('http://goodfactory.cl/bticino/ofertas.json', {
    method: 'POST',
    headers: { "Content-type": "application/json"},
}).then(function(response) {
    status = response.status; // Get the HTTP status code
    response_ok = response.ok; // Is response.status in the 200-range?
    return response.json(); // This returns a promise
}).then(function(responseObject) {
    debug_log(JSON.stringify(responseObject));
    data.value = responseObject;
    debug_log("DEBUG IMAGEN-----------: " + data.value.OFERTA_ESPECIAL_1[0].img);
    if(data.value.OFERTA_ESPECIAL_1[0].url != ""){
        OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_1[0].tit, data.value.OFERTA_ESPECIAL_1[0].txt, data.value.OFERTA_ESPECIAL_1[0].img, data.value.OFERTA_ESPECIAL_1[0].url));    
    }
    if(data.value.OFERTA_ESPECIAL_2[0].url != ""){
        OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_2[0].tit, data.value.OFERTA_ESPECIAL_2[0].txt, data.value.OFERTA_ESPECIAL_2[0].img, data.value.OFERTA_ESPECIAL_2[0].url));
    }
    if(data.value.OFERTA_ESPECIAL_3[0].url != ""){
        OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_3[0].tit, data.value.OFERTA_ESPECIAL_3[0].txt, data.value.OFERTA_ESPECIAL_3[0].img, data.value.OFERTA_ESPECIAL_3[0].url));
    }
    if(data.value.OFERTA_ESPECIAL_4[0].url != ""){
        OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_4[0].tit, data.value.OFERTA_ESPECIAL_4[0].txt, data.value.OFERTA_ESPECIAL_4[0].img, data.value.OFERTA_ESPECIAL_4[0].url));
    }
    storage.write("json.txt", JSON.stringify(responseObject));
}).catch(function(err) {
    debug_log("ERROR" + err);
    storage.read("json.txt").then(function(content) {
        //poner aca copia
    }, function(error) {
        console.log(error);
    });
});

//OFERTA ESPECIAL
function irOfertaEspecial(args){
    var url = args.data.Url;
    var titulo = args.data.Titulo;
    TituloHeaderWebView.value = titulo;
    ColorHeaderWV.value = "#555";
    LinkActivo = url;
    urlWV.value = LinkActivo;
    ActivarLoading.value = true;
}

function DesactivarLoadingWV(){
    ActivarLoading.value = false;
}

module.exports = {
    irOfertaEspecial: irOfertaEspecial,
    ColorHeaderWV: ColorHeaderWV,
    urlWV: urlWV,
    ActivarLoading: ActivarLoading,
    DesactivarLoadingWV: DesactivarLoadingWV,
    TituloHeaderWebView: TituloHeaderWebView,
    data: data,
    OfertaE: OfertaE
};

```

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [March 1, 2016, 4:42pm UTC](https://forums.fusetools.com/t/blank-screen/4173/2 "2016-03-01T16:42:46Z")

</div>

Hey Christian, just out of curiosity does the preview build work fine or does it break and then work fine once you make changes to the running preview?

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [March 1, 2016, 5:18pm UTC](https://forums.fusetools.com/t/blank-screen/4173/3 "2016-03-01T17:18:21Z")

</div>

Hi Andreas. The preview work fine! Only I have problems with the apk version

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [March 1, 2016, 5:25pm UTC](https://forums.fusetools.com/t/blank-screen/4173/4 "2016-03-01T17:25:25Z")

</div>

Really strange. I’ve seen scenarios where a preview (which is interpreted from UX) is capable of things the final build can’t do, but I’ll have to ask the preview team about this. The scenario I was expecting was for your `fuse preview` to fail just like your `fuse build` but with live updates allowing your running preview to do invalid things (yes this sounds weird).

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [March 2, 2016, 1:37am UTC](https://forums.fusetools.com/t/blank-screen/4173/5 "2016-03-02T01:37:50Z")

</div>

I think the problem is ocurred because the `NavigateTo` and the `Toggle` are not working inside the `Each`.

I put this two element inside a `WhileTrue` and work! And also work if I delete the `Each` and I put the element directly.

Like:

```auto
<Page ux:Name="Menu">
        <StackPanel>
                <Rectangle Height="100." Margin="0,0,0,8" Background="#eee" >
                    <Clicked Handler="{irOfertaEspecial}">
                        <NavigateTo NavigationContext="_nav" Target="Webview" Delay="0.5" />
                        <Toggle Target="ColorHeaderWebView" />
                    </Clicked>
                    <DockPanel>
                        <Image StretchMode="UniformToFill" Url="{Imagen}" Height="100." Width="100." Dock="Left" />
                        <Panel Margin="20,0,20,0">
                            <StackPanel Alignment="VerticalCenter">
                                <Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="18" Value="{Titulo}" />
                                <Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="12" Value="{Texto}" />
                            </StackPanel>
                        </Panel>
                    </DockPanel>
                </Rectangle>
        </StackPanel>

```