App.fs

namespace FabulousSubModules

open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms

module App =
    type Model =
      { Global: GlobalModel
        Page1: Page1.Model
        Page2: Page2.Model }

    type Msg =
        | Page1Msg of Page1.Msg
        | Page2Msg of Page2.Msg

    let initModel =
        { Global = { IsSecondPageOpen = false }
          Page1 = fst (Page1.init())
          Page2 = fst (Page2.init()) }

    let init() = initModel, Cmd.none

    let update msg (model:Model) =
        match msg with
        | Page1Msg m ->
            let l, g, c = Page1.update m model.Page1 model.Global
            { model with Page1 = l; Global = g }, (Cmd.map Page1Msg c)
        | Page2Msg m ->
            let l, g, c = Page2.update m model.Page2 model.Global
            { model with Page2 = l; Global = g }, (Cmd.map Page2Msg c)
        
    let view (model: Model) dispatch =
        View.NavigationPage(pages = [
            yield Page1.view model.Page1 model.Global (Page1Msg >> dispatch)
            
            if model.Global.IsSecondPageOpen then
                yield Page2.view model.Page2 model.Global (Page2Msg >> dispatch)
        ])

    let program = Program.mkProgram init update view

type App() as app =
    inherit Application()

    let runner =
        App.program
#if DEBUG
        |> Program.withConsoleTrace
#endif
        |> Program.runWithDynamicView app

#if DEBUG
    do runner.EnableLiveUpdate()
#endif

Page1.fs

namespace FabulousSubModules

open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms

module Page1 =
    type Model =
      { Title: string }

    type Msg =
        | Open

    let initModel = { Title = "Page 1" }

    let init() = initModel, Cmd.none

    let update msg (model: Model) (globalModel: GlobalModel) =
        match msg with
        | Open -> model, { globalModel with IsSecondPageOpen = true }, Cmd.none

    let view (model: Model) (globalModel: GlobalModel) dispatch =
        View.ContentPage (
            title = "Page 1",
            content = View.StackLayout (
                verticalOptions = LayoutOptions.Center,
                children = [
                    View.Button (
                        text = "Open",
                        command = (fun () -> dispatch Open),
                        horizontalOptions = LayoutOptions.Center) ]))

Page2.fs

namespace FabulousSubModules

open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms

module Page2 =
    type Model =
      { Title: string }

    type Msg =
        | Close

    let initModel = { Title = "Page 2" }

    let init() = initModel, Cmd.none

    let update msg (model: Model) (globalModel: GlobalModel) =
        match msg with
        | Close -> model, { globalModel with IsSecondPageOpen = false }, Cmd.none

    let view (model: Model) (globalModel: GlobalModel) dispatch =
        View.ContentPage (
            title = "Page 2",
            content = View.StackLayout (
                verticalOptions = LayoutOptions.Center,
                children = [
                    View.Button (
                        text = "Close",
                        command = (fun () -> dispatch Close),
                        horizontalOptions = LayoutOptions.Center) ]))

Shared.fs

namespace FabulousSubModules

type GlobalModel =
    { IsSecondPageOpen: bool }

• Each Page (wich results in an iOS Controller or an Android Activity) is seen as a sub-module
• Pages don't know their sibling, but only themselves and a global/shared model
• For more complex scenarios this could even be nested

Note:

• This is just an extremely simplified case study.
• IsSecondPageOpen does not need to be global, but is used as an example here. It could also be some user session information etcetera.