Prerequisites

• you should have fuse installed (https://www.fusetools.com/downloads)
• you should have done the introduction tutorial
• in terminal: fuse install android
• in terminal: uno install Fuse.Views

Step 1

git clone <https://github.com/fusetools/hikr>

Step 2 : Add package reference to Fuse.Views

Find hikr.unoproj file inside the project root folder and add "Fuse.Views" to the "Packages" array.

{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.Views"
  ],
  "Includes": [
    "*",
    "Modules/*.js:Bundle"
  ]
}

Step 3 : Make HikrApp component to hold the entire app

3.1 In the project root folder make a new file called HikrApp.ux and paste the contents of MainView.ux.

HikrApp.ux

<App Background="#022328">
    <iOS.StatusBarConfig Style="Light" />
    <Android.StatusBarConfig Color="#022328" />

    <Router ux:Name="router" />

    <ClientPanel>
        <Navigator DefaultPath="splash">
            <SplashPage ux:Template="splash" router="router" />
            <HomePage ux:Template="home" router="router" />
            <EditHikePage ux:Template="editHike" router="router" />
        </Navigator>
    </ClientPanel>
</App>

3.2 In HikrApp.ux

• replace the <App> tags with <Page>
• add ux:Class="HikrApp" to the opening <Page>
• remove <ClientPanel>, we don’t have to worry anymore about the status bar or the bottom nav buttons

HikrApp.ux

<Page ux:Class="HikrApp" Background="#022328">
    <iOS.StatusBarConfig Style="Light" />
    <Android.StatusBarConfig Color="#022328" />

    <Router ux:Name="router" />

    <Navigator DefaultPath="splash">
        <SplashPage ux:Template="splash" router="router" />
        <HomePage ux:Template="home" router="router" />
        <EditHikePage ux:Template="editHike" router="router" />
    </Navigator>
</Page>