Xamarin IOS app not working with AppShell TabBar

Question

Xamarin IOS app not working with AppShell TabBar

Srinath Mannam 291

Our xamarin app is not working on IOS devices. It gets deployed and the initial login screen will popup, The user enters his credentials but the user cannot go any further.

The high-level architecture of the app is as follows

AppShell.xaml

Once the mobile app starts, The following screen will come.

After the user logs in then, I am trying to navigate to one of the screens registered in the App shell TabBar.
await Shell.Current.GoToAsync($"//{nameof(AssignmentOrdersPage)}?from=" + (this.FromPage == null ? "forward" : this.FromPage));

The above navigation is never happening. It keeps on loading in the same screen. Can someone please help me with this?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-27T09:45:07.17+00:00

There are only one ShellItem and four TabBar on your AppShell.xaml , right? Is there any FlyoutItem? And I'm not clear about the FromPage.
Would you mind sharing more code snippets with me?

The above navigation is never happening.

Try to set Shell.NavBarIsVisible="true" in your AssignmentOrdersPage.
Srinath Mannam 291 Reputation points

2022-04-27T14:22:59.567+00:00
Our requirement was not to have the Regular FlyOut Menu which is supported by xamarin as shown below.

Our Requirement

In our requirement, the FlyOut-Menu should be positioned on the right side instead of being on the left side.

We need a Custom-Close-Button to close the FlyOut-Menu. Something like the below mentioned picture.

Also, the FlyOut-Menu View should cover the entire space.

The above was not achievable directly. So we did it indirectly. We created our own FlyOutMenu_View and on the click of the right menu, we trigger this Custom-Flyout-Menu.

That is the reason, why only One Shell Item is there and Four TabBar Items are kept in the AppShell(actually 6 TabBar Items but the code snippet shows only 4 ).

The One Shell Item is the login page that is there in the main question. The TabBar Items are the custom flyout menu items.

On click of any FlyOutMenu the following switch-case gets triggered.

The above-mentioned views work perfectly in Android but don't work in IOS. The app starts and the user tries to Login it doesn't navigate further which it should take the user to Home View.

FromPage you can ignore this. It is just a routing parameter.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Microsoft External Staff

I test on my iPhone, the behavior is same to Android. I'm afraid I misunderstand something what you said, would you mind sharing a basic minimal reproducible demo with me? You could upload it to GitHub and attach the link here.
My testing (I'm not clear about your home page, and I go to loginpage directly after running the app):

<ShellItem Title="login" Icon="icon_feed.png">
        <ShellContent Route="Login" ContentTemplate="{DataTemplate local:LoginPage}" />
    </ShellItem>

    <TabBar Route="AssignmentOrdersPage">
        <ShellContent  ContentTemplate="{DataTemplate local:AssignmentOrdersPage}" />
    </TabBar>
    <TabBar Route="AboutPage">
        <ShellContent  ContentTemplate="{DataTemplate local:AboutPage}" />
    </TabBar>

Click to AssignmentOrdersPage

private async void OnLoginClicked(object obj)
        {
                await Shell.Current.GoToAsync($"//{nameof(AssignmentOrdersPage)}");

            }

Srinath Mannam 291 Reputation points

2022-04-28T08:14:08.267+00:00

I cannot share the current codebase as it is private. I will create a reproducible GitHub repo and update you by tomorrow.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-28T09:44:07.9+00:00

OK, waiting for your update.

Srinath Mannam 291

I try to reproduce the error in a small minimal solution, but I am unable to reproduce the issue. But I found the error where it is happening.

On Click of Login button in LoginPage, the following happens

private async Task OnLoginClicked()
{
    AuthenticationCaller authenticationCaller = new AuthenticationCaller(this.Container);
    if (authenticationCaller.LoginDevice())
    {
        AssignmentsDB assignmentsDB = new AssignmentsDB(this.Container);
        await assignmentsDB.GetAssignmentsWithNavigation();
    }
}

Inside GetAssignmentsWithNavigation function

public async Task GetAssignmentsWithNavigation()
{
    await Task.Run(async () =>
    {
        DateTime date = DateTime.Now;
        AssignmentCaller assignmentCaller = new AssignmentCaller(this.Container);
        ObservableCollection<Assignment> entries = assignmentCaller.GetAssignmentsByDay(date);
        await this.SqlLiteAssignmentActionLogInstance.RemoveActionLogsBeforeDay();
        this.Assignments = entries;
        await this.InsertAssignmentsHandler();
    });
}

private async Task InsertAssignmentsHandler()
{
    await Task.Run(async () =>
    {
        await this.InsertAssignmentsInSqlLite();
        await this.InsertEarningRolesInSqlLite();
        await this.AssignmentsNavigation();
    });
}

private async Task AssignmentsNavigation()
{
    await Shell.Current.GoToAsync($"//{nameof(AssignmentOrdersPage)}");
}

Error: UIKit Consistency error: you are calling a UIKit method that can only be invoked from the UI thread.

Maybe I am not handling the threading properly. In Android surprisingly it works. In IOS id doesn't work.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-29T10:19:34.497+00:00

Yes, try to make UI updates in main-thread. If you have solved this issue, please post an answer below.

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-27T09:45:07.17+00:00

There are only one ShellItem and four TabBar on your AppShell.xaml , right? Is there any FlyoutItem? And I'm not clear about the FromPage.
Would you mind sharing more code snippets with me?

The above navigation is never happening.

Try to set Shell.NavBarIsVisible="true" in your AssignmentOrdersPage.
Srinath Mannam 291 Reputation points

2022-04-27T14:22:59.567+00:00

Our requirement was not to have the Regular FlyOut Menu which is supported by xamarin as shown below.

Our Requirement

In our requirement, the FlyOut-Menu should be positioned on the right side instead of being on the left side.

We need a Custom-Close-Button to close the FlyOut-Menu. Something like the below mentioned picture.

Also, the FlyOut-Menu View should cover the entire space.

The above was not achievable directly. So we did it indirectly. We created our own FlyOutMenu_View and on the click of the right menu, we trigger this Custom-Flyout-Menu.

That is the reason, why only One Shell Item is there and Four TabBar Items are kept in the AppShell(actually 6 TabBar Items but the code snippet shows only 4 ).

The One Shell Item is the login page that is there in the main question. The TabBar Items are the custom flyout menu items.

On click of any FlyOutMenu the following switch-case gets triggered.

The above-mentioned views work perfectly in Android but don't work in IOS. The app starts and the user tries to Login it doesn't navigate further which it should take the user to Home View.

FromPage you can ignore this. It is just a routing parameter.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-28T08:00:02.523+00:00

I test on my iPhone, the behavior is same to Android. I'm afraid I misunderstand something what you said, would you mind sharing a basic minimal reproducible demo with me? You could upload it to GitHub and attach the link here.
My testing (I'm not clear about your home page, and I go to loginpage directly after running the app):

<ShellItem Title="login" Icon="icon_feed.png"> <ShellContent Route="Login" ContentTemplate="{DataTemplate local:LoginPage}" /> </ShellItem> <TabBar Route="AssignmentOrdersPage"> <ShellContent ContentTemplate="{DataTemplate local:AssignmentOrdersPage}" /> </TabBar> <TabBar Route="AboutPage"> <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" /> </TabBar>

Click to AssignmentOrdersPage

private async void OnLoginClicked(object obj) { await Shell.Current.GoToAsync($"//{nameof(AssignmentOrdersPage)}"); }
Srinath Mannam 291 Reputation points

2022-04-28T08:14:08.267+00:00

I cannot share the current codebase as it is private. I will create a reproducible GitHub repo and update you by tomorrow.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-28T09:44:07.9+00:00

OK, waiting for your update.
Srinath Mannam 291 Reputation points

2022-04-29T08:22:28.457+00:00

I try to reproduce the error in a small minimal solution, but I am unable to reproduce the issue. But I found the error where it is happening.

On Click of Login button in LoginPage, the following happens

private async Task OnLoginClicked() { AuthenticationCaller authenticationCaller = new AuthenticationCaller(this.Container); if (authenticationCaller.LoginDevice()) { AssignmentsDB assignmentsDB = new AssignmentsDB(this.Container); await assignmentsDB.GetAssignmentsWithNavigation(); } }

Inside GetAssignmentsWithNavigation function

public async Task GetAssignmentsWithNavigation() { await Task.Run(async () => { DateTime date = DateTime.Now; AssignmentCaller assignmentCaller = new AssignmentCaller(this.Container); ObservableCollection<Assignment> entries = assignmentCaller.GetAssignmentsByDay(date); await this.SqlLiteAssignmentActionLogInstance.RemoveActionLogsBeforeDay(); this.Assignments = entries; await this.InsertAssignmentsHandler(); }); } private async Task InsertAssignmentsHandler() { await Task.Run(async () => { await this.InsertAssignmentsInSqlLite(); await this.InsertEarningRolesInSqlLite(); await this.AssignmentsNavigation(); }); } private async Task AssignmentsNavigation() { await Shell.Current.GoToAsync($"//{nameof(AssignmentOrdersPage)}"); }

Error: UIKit Consistency error: you are calling a UIKit method that can only be invoked from the UI thread.

Maybe I am not handling the threading properly. In Android surprisingly it works. In IOS id doesn't work.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-04-29T10:19:34.497+00:00

Yes, try to make UI updates in main-thread. If you have solved this issue, please post an answer below.

Share via

Xamarin IOS app not working with AppShell TabBar

Our Requirement

Your answer