Platform integration

Overview

In the bitplatform, you have the ability to use JavaScript features across all operating systems (except during Prerendering).
Additionally, there's access to Java and Kotlin capabilities in Android, and Swift and Objective-C in iOS and macOS. C# .NET itself has good access to Windows OS features.
If you wish to use JavaScript, write the relevant function in app.ts and call it using JSRuntime. There are some examples in the project template, for example, for reading and writing in the cookie.
Note: The rest of the details are not related to BlazorDual since this template doesn't produce an App output.

MAUI Essentials sample

Although reading phone contacts in JavaScript is possible, we will look at how to accomplish this in C#.
Suppose we plan to read contacts on Android and iOS and save them on the server. In the Windows and web versions, we'll fetch and display them from the server. We have two options for this:

If the feature exists in Maui Essentials, we're good to go!
You can use its capabilities under #if BlazorHybrid which will work on Android, iOS, Windows, and macOS. You can use it on any of your razor pages and csharp classes.

if (OperatingSystem.IsAndroid() || OperatingSystem.IsIOS())
{
#if BlazorHybrid // MAUI Essentials are available in BlazorHybrid. In order to prevent build errors, use #if compiler directive.
    var contacts = await Contacts.GetAllAsync();
    // use these contacts for UI and also save them to server's database.
#endif
}
else // Windows, Web, macOS, Linux
{
    // get contacts from server using http client and show them in ui.
}

Dependency injection sample

Now, what if Maui Essentials doesn't have the needed feature?
You can define an interface in the src/Client/Core/Services/Contracts and implement it separately in the src/Client/App/Platforms/Android and iOS directories.
Then register it in the src/Client/App/Platforms/Android/Extensions/IServiceCollectionExtensions file for the android and relevant file for the iOS.
You can also have a Windows/Web-specific implementation that simply reads contacts previously saved on the server using an http client.
Then, inject the interface on the relevant razor page, get the list of contacts, and display them.

Sample code:

src/Client/Core/Services/Contracts

public class ContactData
{
    public string Name { get;set; }
}

public interface IContactsService
{
    Task<List<ContactData>> GetContactData();
}

src/Client/App/Platforms/Android/Contracts

public class AndroidContactsService : IContactsService
{
    public async Task<List<ContactData>> GetContactData()
    {
        // here you've access to all android platform features!

        var uri = ContactsContract.Contacts.ContentUri!;

        string[] projection = {
           ContactsContract.Contacts.InterfaceConsts.Id,
           ContactsContract.Contacts.InterfaceConsts.DisplayName,
           ContactsContract.Contacts.InterfaceConsts.PhotoId,
        };

        // Whenever you need android's context, just use MauiApplication.Current

        var cursor = MauiApplication.Current.ContentResolver!.Query(uri, projection, null, null, null);

        // save contacts to the server's database

        // return contacts
    }
}

Native UI (Xaml)

Lastly, you might want to use Xaml Controls, like the well-known MediaElement from the Maui Community Toolkit.
In this case, inject IPubService on your razor page, publish a message, and inject IPubSubService in the constructor of the MainPage class in src/Client/App/MainPage.xaml.cs.
Then subscribe to the relevant key and display your new Xaml page using App.Current.MainPage.PushAsync.
There are a few samples for IPubSubService in the project template.

Advanced scenarios

If needed, for using Kotlin, Swift, Objective-C, or Java libraries, you can utilize .NET MAUI Binding Libraries. This tool helps you have a C# Wrapper for your Kotlin, Java, Swift, Objective-C library, giving you full access.
For further advanced scenarios, you can integrate Blazor content with XAML controls or even display Native controls created in Kotlin or Swift.
There are interesting resources online. For instance, an article showcases how to display SwiftUI controls in your iOS project.
You can also place a razor page once in the web project and once in the app project with the same route, but different C# codes. The appropriate page will be displayed at runtime!

Use native platform features in project templates:

Overview

MAUI Essentials sample

Dependency injection sample

Native UI (Xaml)

Advanced scenarios