Skip to main content
Version: 7.16.0

Events

onAppLaunched#

Called once the app is launched. Used to set the initial layout of the Application - after that the app is ready for user interaction.

const appLaunchedListener = Navigation.events().registerAppLaunchedListener(() => {});

RNN automatically unsubscribes components when they unmount, therefore unsubscribing isn't actually mandatory if you subscribed in componentDidMount.

But you can use the following method to unsubscribe manually:

appLaunchedListener.remove();

componentWillAppear#

Called each time before this component appears on the screen (notifies that the component view is about to be added to the view hierarchy).

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
componentWillAppear() {}
}

componentDidAppear#

Called each time this component appears on the screen (attached to the view hierarchy).

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
componentDidAppear() {}
}

This event can be observed globally as well:

// Subscribe
const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName, passProps }) => {
});
...
// Unsubscribe
screenEventListener.remove();
ParameterDescription
componentIdId of the appearing component
componentNameRegistered name used when registering the component with Navigation.registerComponent()
passPropsprops passed to the component

componentDidDisappear#

Called each time this component disappears from the screen (detached from the view hierarchy).

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
componentDidDisappear() {}
}

This event can be observed globally as well:

// Subscribe
const screenEventListener = Navigation.events().registerComponentDidDisappearListener(({ componentId, componentName }) => {
});
...
// Unsubscribe
screenEventListener.remove();
ParameterDescription
componentIdId of the disappearing component
componentNameRegistered name used when registering the component with Navigation.registerComponent()

registerCommandListener#

The commandListener is called whenever a Navigation command (i.e push, pop, showModal etc) is invoked.

// Subscribe
const commandListener = Navigation.events().registerCommandListener((name, params) => {
});
...
// Unsubscribe
commandListener.remove();
ParameterDescription
nameThe name of the command that was invoked. For example push
paramscommandId: Each command is assigned a unique Id
componentId: Optional, the componentId passed to the command
layout: Optional, if the command invoked created a screen. Slim representation of the component and its options

registerCommandCompletedListener#

Invoked when a command finishes executing in native. If the command contains animations, for example pushed screen animation, the listener is invoked after the animation ends.

// Subscribe
const commandCompletedListener = Navigation.events().registerCommandCompletedListener(({ commandId, completionTime, params }) => {
});
...
// Unsubscribe
commandCompletedListener.remove();
ParameterDescription
commandIdId of the completed command
completionTimeTimestamp when the command, and consecutive animations, completed.

registerModalDismissedListener#

Invoked when a modal is dismissed.

// Subscribe
const modalDismissedListener = Navigation.events().registerModalDismissedListener(({ componentId, modalsDismissed }) => {
});
...
// Unsubscribe
modalDismissedListener.remove();
ParameterDescription
componentIdId of the modal
modalsDismissedNumber of modals that were dismissed

registerModalAttemptedToDismissListener(iOS 13+ only)#

Invoked only on iOS pageSheet modal when swipeToDismiss flag is set to false and modal was swiped down to dismiss.

// Subscribe
const modalAttemptedToDismissListener = Navigation.events().registerModalAttemptedToDismissListener(({ componentId }) => {
});
...
// Unsubscribe
modalAttemptedToDismissListener.remove();
ParameterDescription
componentIdId of the modal a user is attempting to dismiss

registerScreenPoppedListener#

Invoked when the screen is popped.

// Subscribe
const screenPoppedListener = Navigation.events().registerScreenPoppedListener(({ componentId }) => {
});
...
// Unsubscribe
screenPoppedListener.remove();
ParameterDescription
componentIdId of the screen which was popped

registerBottomTabSelectedListener#

Invoked when BottomTab is selected by a user.

// Subscribe
const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
});
...
// Unsubscribe
bottomTabEventListener.remove();

registerBottomTabLongPressedListener#

Invoked when BottomTab is long pressed by a user.

// Subscribe
const bottomTabEventListener = Navigation.events().registerBottomTabLongPressedListener(({ selectedTabIndex }) => {
});
...
// Unsubscribe
bottomTabEventListener.remove();
ParameterDescription
selectedTabIndexIndex of the newly selected tab
unselectedTabIndexIndex of the previously selected tab

navigationButtonPressed event#

This event is emitted whenever a TopBar button is pressed by a user.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Unregistering listeners bound to components isn't mandatory since RNN handles the unregistration for you
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
navigationButtonPressed({ buttonId }) {}
}

This event can be observed globally as well:

// Subscribe
const navigationButtonEventListener = Navigation.events().registerNavigationButtonPressedListener(({ buttonId }) => {
});
...
// Unsubscribe
navigationButtonEventListener.remove();
ParameterDescription
buttonIdbuttonId: id of the pressed button

searchBarUpdated (iOS 11+ only)#

Called whenever the SearchBar of NavigationBar is updated.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
searchBarUpdated({ text, isFocused }) {}
}

searchBarCancelPressed (iOS 11+ only)#

Called when the cancel button of the SearchBar from NavigationBar is pressed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}