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();

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 true 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 }) {}
}