Ionic: Dismiss the splash screen only upon reaching the last view in the stack

In my Ionic app, I am faced with the following use case involving the implementation of the splashsscreen plugin :

1. When the user is not logged in:

Show SplashScreen >  LoginPage pushed to stack > 
Hide SplashScreen on the login page

2. If the user is NOT logged in:

Show SplashScreen > Login page pushed to stack> 
Landing page pushed to stack (after user logs in) > Hide SplashScreen.

Expected Outcome:

In scenario-2, I anticipate that the SplashScreen will disappear and the Landing Page will be displayed without the appearance of the Login page.

Actual Result:

However, in scenario-2, the SplashScreen disappears momentarily, the login page briefly appears, and then the Landing page shows up.

Is there a way for me to achieve the desired behavior? Please advise if any code snippets are needed.

cordovatypescriptionic-frameworkionic3cordova-plugins

Answer №1

To begin, make sure the splash screen is not set to automatically hide by following these steps:

In your config.xml file:

<preference name=”FadeSplashScreen” value=”false”/>
<preference name=”AutoHideSplashScreen” value=”false”/>

Next, in your app.component.ts, set the rootPage based on the user's login status:

platform.ready().then(() => {
    if(userIsLoggedIn){
       this.rootPage = Page1;
       } else {
       this.rootPage = Page2;
    }
     //Finally, hide the splash screen.
     this.splashscreen.hide();
   });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I utilize generic types in Typescript/React when crafting a component with prop types?

I am facing an issue with a component that has a generic definition as shown below: export type CheckboxItem = { label: string, code: string, }; export type CheckboxesProps = { items: CheckboxItem[], handleStateChange: (selected: (CheckboxItem[&ap ...

reactjstypescript

When using Angularfire, the function to switch the type from snapshotChanges will consistently return the value as "value"

At this moment, when I use the Angularfire extension to call the following code: this.db.doc(path).snapshotChanges(); Angularfire always retrieves a DocumentSnapshot with a type that is consistently "value", regardless of the actual change type. Is there ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

What is the best way to locate the nearest marker using the Google Maps Direction Service?

Currently, I am engaged in the development of a Google Maps project where I am integrating markers retrieved from a database onto the map using the drawMarkers function. In addition to this, the Google Maps feature tracks your current location and refreshe ...

javascriptangularjsgoogle-mapsionic-framework

Passing a React functional component with SVG properties to another component as a prop

My goal is to import a React functionComponent from an SVG and pass it as a prop to another component for rendering the svg. The code below compiles without errors, but crashes when trying to display the svg in the browser with the following message: Er ...

reactjstypescriptreact-redux

Guide on displaying information on a pie chart in Angular 2 using ng2-charts

How can I display data on a pie chart like this? https://i.sstatic.net/WX9ptm.png Like shown in the image below: https://i.sstatic.net/sqlv2m.png <canvas baseChart class="pie" [data]="Data" [labels]="Labels" [colors]="Colors" [chartType]="p ...

angulartypescript

Obtain a date exclusively for a specified time on the current day

Is there a way to obtain a datetime for a specific time on the current day without relying on momentJS? My input is a string of the time in the format 13:45 I attempted to achieve this using the following code snippet: const time: String = '13:45&apo ...

javascripttypescriptdatetimemomentjs

Is it not possible to call this authentication expression in a Typescript file when using Next JS?

I am currently developing a sign-in method for my Next.js application and I have been referring to the GitHub repository's recommended documentation. However, upon reaching the authentication folder step, I encountered an error regarding the sign-in ...

reactjstypescriptnext.jsnext-auth

Retrieve information and transform it into a dynamic variable using Firebase

I am trying to retrieve data from the current user, specifically their company named "ZeroMax", and then store this data in a global variable. The purpose of this variable is to define the path for Firebase. I believe my code gives a clear understanding of ...

angulartypescriptfirebaseionic-frameworkgoogle-cloud-firestore

Property in TypeORM FindOptionsWhere that may be omitted

My current task involves retrieving translations for various types of questions stored in my database. One issue I am facing is that some questions come with options while others do not. const where: FindOptionsWhere<QuestionTranslation> = { ...

typescripttypeorm

How can I ensure that a pop-up is shown only once per day in Vue.js

I am facing an issue with a method that is supposed to display a modal window 4 seconds after the user logs onto the website. If the modal is closed, it should not be displayed again for the next 24 hours. However, I am encountering problems with LocalSt ...

javascripttypescriptvue.js

Tips on enabling typing support in VS Code and the tsc command for modules that do not use @types?

Currently, I am utilizing the "Rhea" module (https://www.npmjs.com/package/rhea) in my project. This module has its own typings for typescript located in the /typings folder within the module directory (/node_modules/rhea/typings). This differs from the us ...

typescripttypescript-typings

The response from the Http GET request in the Angular web service app was delayed

I am currently working with Angular CLI version 8.3.2 and Node version 10.16.3 on win32 x64. My project involves integrating an Angular frontend with a .NET backend. The frontend communicates with the backend API to retrieve a list of messages using an HTT ...

angulartypescripthttp-get

"Exploring the capabilities of Rxjs ReplaySubject and its usage with the

Is it possible to utilize the pairwise() method with a ReplaySubject instead of a BehaviorSubject when working with the first emitted value? Typically, with a BehaviorSubject, I can set the initial value in the constructor allowing pairwise() to function ...

javascriptangulartypescriptrxjsbehaviorsubject

Creating a custom data type for the Tanstack table filtering function

I developed a unique filter function specifically for enhancing the functionality of Tanstack Table by utilizing fuse.js. Despite my efforts, TypeScript consistently raises concerns when I try to define the type for my custom function. My goal is to alig ...

typescripttypescript-genericstanstack

I'm having trouble getting forkJoin to trigger

As I create a guard in Angular, I am faced with the challenge of making two distinct HTTP requests and then deciding whether to continue based on both responses. After some research, I learned that forkJoin is the recommended approach for this task, but fo ...

angulartypescriptrxjs

Absent observable functions in the RxJS 5.0.0-beta.0 release

I am encountering an issue when trying to use RxJS with Angular 2. The methods recommended from the Typescript definition file are not present on my Observable object... https://i.stack.imgur.com/6qhS4.png https://i.stack.imgur.com/m7OBk.png After inves ...

httptypescriptbrowserifyangularrxjs

Can auto-import be configured in WebStorm without using double dots?

Is it feasible to configure WebStorm for automatic import of modules/Component/components/MyComponent instead of using ../MyComponent? ...

typescriptwebstormjetbrains-ide

Which regular expression can match both the start and finish of a string?

I need help with editing a DateTime string in my TypeScript file. The specific string I'm working with is 02T13:18:43.000Z. My goal is to remove the first three characters, including the letter T at the beginning of the string, as well as the last 5 c ...

javascriptregextypescript

Manage input from either mouse or touch events based on the event type

I've encountered a challenge with my general handler function that processes both mouse and touch events. Despite my efforts, Typescript keeps issuing errors due to the distinction between mouseEvent and touchEvent. function handleStopDrag(e: MouseEv ...

typescript

Encountering a problem while attempting to transfer data from a functional component to a class component in React with Typescript

In one of my pages, specifically the roleCategory.tsx (a functional component), I am utilizing the Navigate function to send a value named FromPage to another page called Home.tsx (which is a Class component). Below is the snippet of code where this functi ...

reactjstypescriptreact-router