# frame.navigate(detailsPage)
mainPage    > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage    > unloaded
mainPage    > navigatedFrom (isBackNavigation: false)
mainPage    > disposeNativeView # since backstackVisible: false, we won't be able to reach mainPage after this point
detailsPage > navigatedTo (isBackNavigation: false)
```

## Examples [​](https://docs.nativescript.org/ui/page\#examples)

### Getting a reference to the current Page [​](https://docs.nativescript.org/ui/page\#getting-a-reference-to-the-current-page)

NativeScript provides various ways to access the current Page instance.

#### Via Page Events [​](https://docs.nativescript.org/ui/page\#via-page-events)

Any events emitted by the Page will have a reference to the Page itself via `args.object`. For example:

```ts
// loaded event
onPageLoaded(args: LoadEventData) {
  const page = args.object as Page;
}

// navigatedTo event
onNavigatedTo(args: NavigatedData) {
  const page = args.object as Page;
}
```

#### Via the page property of any View within the Page [​](https://docs.nativescript.org/ui/page\#via-the-page-property-of-any-view-within-the-page)

Any View nested inside a Page hierarchy can access the Page via the `page` property.

```ts
onTap(args: EventData) {
  const button = args.object as Button
  const page = button.page as Page;
}
```

#### Via the currentPage property of a Frame instance [​](https://docs.nativescript.org/ui/page\#via-the-currentpage-property-of-a-frame-instance)

The currently displayed page can be accessed via the Frame, to get a reference to the frame you can use `Frame.topmost()` for example:

```ts
import { Frame } from '@nativescript/core'

const frame = Frame.topmost()
const page = frame.currentPage // Page
```

See [Frame](https://docs.nativescript.org/ui/frame), [Getting a Frame Instance](https://docs.nativescript.org/ui/frame#getting-a-frame-instance).

### Handling various Page events [​](https://docs.nativescript.org/ui/page\#handling-various-page-events)

A page emits various events during it's lifecycle, navigation events and general View events like `loaded`/ `unloaded`/ `layoutChanged` etc.

Page DefinitionEvent Handlers

```xml
<Page
  loaded="onLoaded"
  unloaded="onUnloaded"
  navigatedFrom="onNavigatedFrom"
  navigatedTo="onNavigatedTo"
  navigatingFrom="onNavigatingFrom"
  navigatingTo="onNavigatingTo"
  layoutChanged="onLayoutChanged"
>
  <ActionBar title="MyApp" />
  <!-- ... -->
</Page>
```

```ts
onLoaded(args: EventData) {
  const page = args.object as Page
}

onUnloaded(args: EventData) {
  const page = args.object as Page
}

onLayoutChanged(args: EventData) {
  const page = args.object as Page
}

onNavigatedTo(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}

onNavigatingFrom(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}

onNavigatedFrom(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}
```

## Props [​](https://docs.nativescript.org/ui/page\#props)

### actionBar [​](https://docs.nativescript.org/ui/page\#actionbar)

```ts
actionBar: ActionBar
```

Gets or sets the ActionBar for this page.

See [ActionBar](https://docs.nativescript.org/ui/action-bar).

### actionBarHidden [​](https://docs.nativescript.org/ui/page\#actionbarhidden)

```ts
actionBarHidden: boolean
```

Allows hiding the ActionBar.

Defaults to `false`.

### frame [​](https://docs.nativescript.org/ui/page\#frame)

```ts
frame: Frame
```

The Frame instance containing the page.

See [Frame](https://docs.nativescript.org/ui/frame).

### navigationContext [​](https://docs.nativescript.org/ui/page\#navigationcontext)

```ts
navigationContext: any
```

A context used to pass data during navigation.

### backgroundSpanUnderStatusBar [​](https://docs.nativescript.org/ui/page\#backgroundspanunderstatusbar)

```ts
backgroundSpanUnderStatusBar: boolean
```

Gets or sets whether the background of the page spans under the status bar.

Defaults to `false`.

### androidStatusBarBackground [​](https://docs.nativescript.org/ui/page\#androidstatusbarbackground)

```ts
androidStatusBarBackground: Color
```

Gets or sets the color of the status bar on Android devices. **Android only.**

See [Color](https://docs.nativescript.org/api/class/Color).

### enableSwipeBackNavigation [​](https://docs.nativescript.org/ui/page\#enableswipebacknavigation)

```ts
enableSwipeBackNavigation: boolean
```

Gets or sets whether the page can be swiped back on iOS. **iOS only.**

Defaults to `true`.

### statusBarStyle [​](https://docs.nativescript.org/ui/page\#statusbarstyle)

```ts
statusBarStyle: 'light' | 'dark'
```

Gets or sets the style of the status bar.

### ...Inherited [​](https://docs.nativescript.org/ui/page\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Page).

## Events [​](https://docs.nativescript.org/ui/page\#events)

### loaded [​](https://docs.nativescript.org/ui/page\#loaded)

```ts
on('loaded', (args: EventData) => {
  const page = args.object as Page
  console.log('Page loaded')
})
```

Emitted after the page has been loaded.

### navigatingTo [​](https://docs.nativescript.org/ui/page\#navigatingto)

```ts
on('navigatingTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated to:', args.isBackNavigation)
})
```

Emitted before the app has navigated to the current page.

### navigatedTo [​](https://docs.nativescript.org/ui/page\#navigatedto)

```ts
on('navigatedTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated to:', args.isBackNavigation)
})
```

Emitted after the app has navigated to the current page.

### navigatingFrom [​](https://docs.nativescript.org/ui/page\#navigatingfrom)

```ts
on('navigatingFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated from:', args.isBackNavigation)
})
```

Emitted before the app has navigated away from the current page.

### navigatedFrom [​](https://docs.nativescript.org/ui/page\#navigatedfrom)

```ts
on('navigatedFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated from:', args.isBackNavigation)
})
```

Emitted after the app has navigated away from the current page.

## Native component [​](https://docs.nativescript.org/ui/page\#native-component)

- Android: [`org.nativescript.widgets.GridLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/GridLayout.java)
- iOS: [`UIViewController`](https://developer.apple.com/documentation/uikit/uiviewcontroller)

2. [Page Lifecycle](https://docs.nativescript.org/ui/page#page-lifecycle)
1. [Lifecycle event examples](https://docs.nativescript.org/ui/page#lifecycle-event-examples)
3. [Examples](https://docs.nativescript.org/ui/page#examples)
1. [Getting a reference to the current Page](https://docs.nativescript.org/ui/page#getting-a-reference-to-the-current-page)
2. [Handling various Page events](https://docs.nativescript.org/ui/page#handling-various-page-events)
4. [Props](https://docs.nativescript.org/ui/page#props)
1. [actionBar](https://docs.nativescript.org/ui/page#actionbar)
2. [actionBarHidden](https://docs.nativescript.org/ui/page#actionbarhidden)
3. [frame](https://docs.nativescript.org/ui/page#frame)
4. [navigationContext](https://docs.nativescript.org/ui/page#navigationcontext)
5. [backgroundSpanUnderStatusBar](https://docs.nativescript.org/ui/page#backgroundspanunderstatusbar)
6. [androidStatusBarBackground](https://docs.nativescript.org/ui/page#androidstatusbarbackground)
7. [enableSwipeBackNavigation](https://docs.nativescript.org/ui/page#enableswipebacknavigation)
8. [statusBarStyle](https://docs.nativescript.org/ui/page#statusbarstyle)
9. [...Inherited](https://docs.nativescript.org/ui/page#inherited)
5. [Events](https://docs.nativescript.org/ui/page#events)
1. [loaded](https://docs.nativescript.org/ui/page#loaded)
2. [navigatingTo](https://docs.nativescript.org/ui/page#navigatingto)
3. [navigatedTo](https://docs.nativescript.org/ui/page#navigatedto)
4. [navigatingFrom](https://docs.nativescript.org/ui/page#navigatingfrom)
5. [navigatedFrom](https://docs.nativescript.org/ui/page#navigatedfrom)
6. [Native component](https://docs.nativescript.org/ui/page#native-component)

## NativeScript Webpack Configuration

Note

This section is only aplicable to `@nativescript/webpack` version `5.0.0` and above. If you are using an older version, consider upgrading.

All NativeScript applications are bundled using webpack. To manage the required configuration, we maintain the `@nativescript/webpack` package.

All new projects come with the base `webpack.config.js` that's pre-configured to build a NativeScript app:

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // Learn how to customize:
  // https://docs.nativescript.org/webpack

  return webpack.resolveConfig()
}
```

The above config configures most things required to bundle a NativeScript application. Internally it's using [webpack-chain](https://github.com/neutrinojs/webpack-chain) to generate the final config that is passed to webpack.

In some cases you may wish to extend the configuration, which is possible using the [API](https://docs.nativescript.org/configuration/webpack#api) for applications, and the [Plugin API](https://docs.nativescript.org/configuration/webpack#plugin-api) for plugins. This page contains many examples of common things you might want to change in the [Examples of configurations section](https://docs.nativescript.org/configuration/webpack#examples-of-configurations) \- for anything else not mentioned here, refer to the [webpack-chain documentation](https://github.com/neutrinojs/webpack-chain).

## CLI Flags [​](https://docs.nativescript.org/configuration/webpack\#cli-flags)

When running a NativeScript app the following flags have an effect on the final webpack config

### --no-hmr [​](https://docs.nativescript.org/configuration/webpack\#no-hmr)

Disable HMR (enabled by default)

### --env.verbose [​](https://docs.nativescript.org/configuration/webpack\#env-verbose)

Prints verbose logs and the internal config before building

### --env.replace=from:to [​](https://docs.nativescript.org/configuration/webpack\#env-replace-from-to)

Add file replacement rules. For source files ( `.js` and `.ts`) this will add a new alias to the config, for everything else, it will add a new copy rule.

Example:

```bash
--env.replace=./src/environments/environment.ts:./src/environments/environment.prod.ts
```

will add an alias, so the following code

```ts
import { environment } from './environments/environment.ts'
```

would resolve the import path to `./environments/environment.prod.ts`.

### --env.appComponents [​](https://docs.nativescript.org/configuration/webpack\#env-appcomponents)

Allows passing additional App Components for android.

For example if you have a custom activity defined in `myCustomActivity.ts` you can pass `--env.appComponents=myCustomActivity.ts` to include it in the build.

### --env.production [​](https://docs.nativescript.org/configuration/webpack\#env-production)

Enable production mode. This will minify the bundle using Terser.

### --env.report [​](https://docs.nativescript.org/configuration/webpack\#env-report)

Generate a report with the BundleAnalyzerPlugin

### --env.profile [​](https://docs.nativescript.org/configuration/webpack\#env-profile)

Generate a `webpack.stats.json` to analyze on [https://webpack.github.io/analyse/](https://webpack.github.io/analyse/)

### --env.watchNodeModules [​](https://docs.nativescript.org/configuration/webpack\#env-watchnodemodules)

Enable watching `node_modules` for changes. Useful when debugging plugins and making changes directly in `node_modules`.

### --env.e2e [​](https://docs.nativescript.org/configuration/webpack\#env-e2e)

Enables E2E (end-to-end) mode - this currently enables the `testID` property in `@nativescript/core`.

### Additional flags [​](https://docs.nativescript.org/configuration/webpack\#additional-flags)

Additional env flags that are usually passed by the CLI automatically

- `--env.appPath` \- path to the app source (same as `appPath` in the `nativescript.config.ts`)
- `--env.appResourcesPath` \- path to App\_Resources (same as `appResourcesPath` in the `nativescript.config.ts`)
- `--env.nativescriptLibPath` \- path to the currently running CLI's library.
- `--env.android` \- `true` when running on android
- `--env.ios` \- `true` when running on ios
- `--env.platform=<platform>` \- for specifying the platform to use. Can be `android` or `ios`, or a custom platform in the future.
- `--env.hmr` \- `true` when building with HMR enabled

## Global "magic" variables [​](https://docs.nativescript.org/configuration/webpack\#global-magic-variables)

We define a few useful globally available variables that you can use to alter logic in your applications.

- `__DEV__` \- `true` when webpack is building in development mode
```ts
if (__DEV__) {
    // we are running a dev build
}
```

- `global.isAndroid`, (available as `__ANDROID__` too) - `true` when the platform is Android
```ts
if (global.isAndroid) {
    // we are running on android
}
```

- `global.isIOS`, (available as `__IOS__` too) - `true` when the platform is iOS
```ts
if (global.isIOS) {
    // we are running on iOS
}
```


The following variables are also defined, but are primarily intended to be used by NativeScript Core internally, or plugins that wish to use these.

- `__NS_WEBPACK__` \- always `true` when building with webpack
- `__NS_ENV_VERBOSE__` \- `true` when `--env.verbose` is set
- `__NS_DEV_HOST_IPS__` \- an array of IP addresses of the host machine (the machine running the build) when in `development` mode, and an empty array in production mode.
- `__CSS_PARSER__` \- the CSS parser used by NativeScript Core. The value is set based on the `cssParser` value in the `nativescript.config.ts` and defaults to `css-tree`
- `__UI_USE_XML_PARSER__` \- a flag used by NativeScript Core to disable the XML parser when it's not used
- `__UI_USE_EXTERNAL_RENDERER__` \- a flag used by NativeScript Core to disable registering global modules when an external renderer is used.

## Using DotEnv files [​](https://docs.nativescript.org/configuration/webpack\#using-dotenv-files)

[DotEnv](https://github.com/mrsteele/dotenv-webpack) is pre-configured to allow defining environment variables to be made available during runtime. You can create a `.env` file in your project root and define values that will be available to your app during runtime.

In case you need multiple environments, you can create additional env files with the naming convention of `.env.<name>` (e.g. `.env.prod`, `.env.staging`).

The following logic is used when loading environment files:

- `.env` is loaded by default if it exists
- `.env.<name>` is loaded when `--env.env=<name>` is passed to the build/run command and `.env.<name>` exists, otherwise it falls back to loading `.env` (if it exists)

As a general practice, `.env` files should not be committed to your source repository as they can contain sensitive values. Often times a `.env.example` is committed with all the variable names omitting the values, and each developer would then duplicate it to a `.env` or `.env.<name>` file and fill in the values.

### Example DotEnv files [​](https://docs.nativescript.org/configuration/webpack\#example-dotenv-files)

The following files in the project root will make `MY_API_ENDPOINT` and `MY_API_SECRET` available in the app codebase.

```bash