Skip to main content

Back Navigation

Handle navigation correctly with the channel's internal navigation stack.

Using the View Model​

The channel view model tracks whether back navigation is available:

@StateObject private var viewModel = BBChannelViewModel()

// Check and navigate
if viewModel.canGoBack {
    viewModel.goBack()
}

Custom Back Button​

struct ChannelScreen: View {
    @StateObject private var viewModel = BBChannelViewModel()

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                if viewModel.canGoBack {
                    Button(action: { viewModel.goBack() }) {
                        Image(systemName: "chevron.left")
                            .foregroundColor(.white)
                    }
                }
                Spacer()
                Text("Videos").foregroundColor(.white)
                Spacer()
            }
            .padding()
            .background(Color.black)

            BBChannelView(
                channelUrl: "https://demo.bbvms.com/ch/channel_name.json",
                viewModel: viewModel,
                callbacks: BBChannelCallbacks()
            )
        }
    }
}

BBChannelWithPlayerView​

BBChannelWithPlayerView includes a built-in back arrow above the player when on a detail page. Set showBackArrow: false to disable it and handle back navigation yourself:

BBChannelWithPlayerView(
    channelUrl: "https://demo.bbvms.com/ch/channel_name.json",
    viewModel: playerVM,
    callbacks: callbacks,
    showBackArrow: false  // Handle back navigation yourself
)

When the channel is inside a NavigationStack, coordinate back behavior:

struct ChannelScreen: View {
    @Environment(\.dismiss) private var dismiss
    @StateObject private var viewModel = BBChannelViewModel()

    var body: some View {
        BBChannelView(
            channelUrl: "https://demo.bbvms.com/ch/channel_name.json",
            viewModel: viewModel,
            callbacks: BBChannelCallbacks()
        )
        .navigationBarBackButtonHidden(viewModel.canGoBack)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    if viewModel.canGoBack {
                        viewModel.goBack()
                    } else {
                        dismiss()
                    }
                }) {
                    Image(systemName: "chevron.left")
                }
            }
        }
    }
}

This hides the default back button when the channel has internal navigation, and shows a custom one that either navigates within the channel or pops the screen.

Priority Order​

When handling the back action:

  1. Dismiss native player — If a modal player is presented
  2. Channel back navigation — If the channel is on a sub-page (detail, overview, search)
  3. App navigation — Pop the screen or dismiss

Listening for Changes​

Use the onCanGoBackChange callback to react to navigation changes:

let callbacks = BBChannelCallbacks(
    onCanGoBackChange: { canGoBack in
        print("Can go back: \(canGoBack)")
    },
    onNavigationStateChange: { state in
        print("Page: \(state.pageType)")
    }
)