Ionic 2 login flow with nav menu - authentication

Ionic 2 allows a menu controller to show the standard hamburger nav menu toggle button in the nav bar. But by design, it only does this for the root page in the nav stack. The problem is that for an authenticated app, the login page needs to be the root page initially.
I can obviously set the root to the real root page after a successful login, but this causes two issues: 1) The nice page slide animation doesn't fire because it's not pushing a page onto the nav stack. 2) The menu hamburger isn't shown in that page even though it is the root.
This seems like a standard issue for most connected ionic apps, yet I can't find any complete examples. What's the recommended way to make this flow work (ideally without hacking past the built in menu management mechanism)?
UPDATE: The hamburger not showing (#2) was due to programmer error :( That's been resolved. Still looking for a solution to the animation.

this.nav.setRoot(Page, {}, {animate: true, direction: 'forward'});
Solution found enter link description here
After googling 'animate ionic setroot'

Related

Instagram Webview disables navigation

I notice that if I put a Vue website in the URL of an Instagram profile, when you click the link, as you click around the site using the Instagram inline-browser (using vue-router), the back/next buttons are disabled.
The only instance of this I can find online is here, but no other details:
https://github.com/swup/swup/issues/403
Does anyone know how this might be fixed?
If you actually click settings in browser, and then close it, all the sudden the back buttons are re-enabled, including all the previous pages you went to in tact in the history... very bizarre.

The default out-of-the box template for Blazor doesn't work on mobile

If I create a new Blazor application (Server-side or WASM), the default template that is provided with the Counter and Fetch Data menu items doesn't work properly on a mobile device. It run's ok on a desktop browser. Is there something setup incorrectly?
On the mobile, the menu never opens. The hamburger Menu button cannot be tapped. Apart from that, if you manage to navigate by URL to another page, the page keep loading without giving any error.

Flutter share bloc between pages

I have a basic flutter app with 2 pages and 1 bloc.
The home page displays a list of users (only 2 attributes)
When a user-item is clicked, a detail page displays all attributes
The user data is fetched using a bloc which emits 2 states
AllUsersLoadedState from the api domain.com/users
UserLoadedState from the api domain.com/users/id
Because both home page and detail page is using the same bloc in their BlocBuilder when I navigate to the detail page and hit the back button, the home page is crashed.
Any way to handle it without writing 2 individual bloc?
If you want to share a BLoC between screens, then you should create the BLoC in such a way that it won't be destroyed while those 2 screens are active.
One way of doing this is to provide the BLoC using the Provider package, or as an InheritedWidget. If you use Provider then on each screen you just ask for the BLoC using Provider.of<MyBloc>(context). You will have to read more about Provider to learn how to use it.
Another way is passing the BLoC as a variable to your widget's constructor.
I figured out what was the issue.
Because both pages were using the same bloc they would rebuild on both states while the intended behavior was for the home page to rebuild only on AllUsersLoadedState and detail page to rebuild only on UserLoadedState.
So when I navigate to the detail page and a UserLoadedState is received the home page didn't know how to handle the state and would crash.
The solution is to use the condition parameter in the bloc builder to skip rebuilding on an unwanted state.

Implementing tabs and menu in a single page in ionic4

I have a project which is done in ionic1 with tabs and menu in the same page.I want to implement the same in ionic4.
The existing problem in ionic4 is that, those pages being redirected on clicking the menu are not supporting tabs. I am not able to include the code for menu and tab in the same page.
you can flow this tutorial Combine side menu, tabs and login page with Ionic 4
that implements side-menu and tabs on the same page
another useful tutorial is here from IonicAcademy

How to put BottomBar for arbitrary page using react-native-navigation Wix library

I am using react-native navigation Wix V2 library. I want to design a login page that is launcher and does not have BottomBar and then go to home page by clicking on an Enter bottom. In home page I want to have a BottomBar menu. The problem is that I only could bring BottomBar menu on my launcher page and I cannot have it on any arbitrary page. How I have to code in index.js?
Please help me with this issue.
Take a look at this example project: https://github.com/atoami/react-native-navigation-redux-starter-kit
Right at the beginning, it shows a screen where you can choose between starting a Single Screen App or a Tab Based App.