Add built-in support for customizable splash screen across platforms

[KL2400040448]

Is your feature request related to a problem? Please describe.

Is your feature request related to a problem? Please describe.
Currently, customizing the splash screen in NativeScript requires manual native configuration and additional plugins. This makes the setup complex for beginners and increases platform-specific maintenance.

Describe the solution you'd like

A built-in, unified API in NativeScript to configure splash screens (image, background color, duration) for both Android and iOS using a single common configuration file.

Describe alternatives you've considered

Using third-party plugins and manual native code changes in Android Studio and Xcode.

Anything else?

This feature would greatly simplify app setup for new developers and reduce dependency on external plugins.

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• I agree to follow this project's Code of Conduct

[flipperlite]

It's pretty simple to do with the following pseudo code. ObservableProperty is here.

~/main.ts or ~/app.ts

Application.run({ moduleName: 'app-root' })

~/app-root.xml

<Frame defaultPage="splash/splash-page" />

splash/splash-page.xml

<Page
    actionBarHidden="true"
    navigatedTo="_navigatedTo"  
    xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout backgroundColor="{{ splashBgColor }}" class="align-middle p-10">
    <!-- stretch options: none, aspectFill (fits horizontal width), aspectFit (fits vertical width), fill (does not keep aspect ratio fits both horizontal and vertical) -->
    <Image src="{{ splashImage }}" />
  </StackLayout>
</Page>

~/config.ts

export const Config = {
  LOGO: 'res://your_logo_in_app_resources',
  SPLASH_BG: 'transparent',
  REQUIRE_LOGIN: true,
  LOGIN_PAGE_ROUTE: 'login/login-page',
  DEFAULT_PAGE_ROUTE: 'home/home-page',
  SPLASH_TIMEOUT_MILLISECONDS: 2000,
}

splash/splash-page.ts

import { Frame, NavigatedData, Observable, Page } from "@nativescript/core"
import { ObservableProperty } from "~/shared/observable-property-decorator"
import { Config } from "~/config"
import { isLoggedIn } from "~/your-business-logic"

class SplashViewModel extends Observable {
  @ObservableProperty() splashImage: string = Config.LOGO // res://your_logo_in_app_resources
  @ObservableProperty() splashBgColor: string = Config.SPLASH_BG // 'transparent'
}

function go(pageRoute: string): void {
  Frame.topmost().navigate({
    moduleName: pageRoute,
    transition: {
      name: 'fade',
    },
  })
}

async function navigatedTo(data: NavigatedData): Promise<void> {
  const page = <Page>data.object
  const vm = new SplashViewModel()
  page.bindingContext = vm

  setTimeout(() => {
    // expecting isLoggedIn to be a function that returns boolean
    if (Config.REQUIRE_LOGIN && isLoggedIn() !== true) {
      go(Config.LOGIN_PAGE_ROUTE) // login/login-page
    } else {
      go(Config.DEFAULT_PAGE_ROUTE) // home/home-page
    }
  }, Config.SPLASH_TIMEOUT_MILLISECONDS) // 2000
}