React-native-navigation: Callback on switching tabs

[wgormley]

is there anyway to know when a tab has become the active tab, or a way to set a callback on tab presses/changes?

[andrej-pavlov]

+1

[gwendall]

+1

[willks]

Actually this would be really good - I have a tab that opens up a photo gallery or camera (like instagram). I just really need to find out which is the active tab, I've done it before using JS only but I have decided that the only way forward is with react-native is with react-native-controllers/react-native-navigation (from Wix!!). I can wait.

[guyca]

This feature is at the top of our list. Will be added soon, after the Android version matures a bit.

[alfonsogacevedo]

+1 Desperately need this. Are there any current workarounds to get the active tab or when the tab presses/changes?

[tylerclark]

+1

[ppsreejith]

+1

[eggmantv]

+1

[ccokme]

+1

[simonmitchell]

Check out our branch here for a quick and easy implementation: https://github.com/3sidedcube/react-native-navigation/tree/feature/view_lifecycle

Happy to pull request it, but it's built on top of a fork that we're already waiting on a large pull request to go through on so will have to wait for that first!

[Jaafar-abusair]

Any update on this guys?

[simonmitchell]

@Jaafar-abusair I believe the team at wix will be merging the branch that our view_lifecycle branch was built on top of fairly soon, once they have done so we'll submit a PR for this logic :) It's fairly small and simple to implement, so wouldn't be too long I guess :D

[varungupta85]

I think this can also be achieved right now by using the bottomTabSelected event for bottom tabs and tabSelected event for top tabs. When the application is started, the first screen is the selected tab. Afterward, you can listen on one these two events depending on your layout to keep track of the currently selected tab.

[simonmitchell]

Agreed, what we implemented was slightly different to what is being requested here to be fair, we implemented callbacks for all view lifecycle methods: viewWillAppear, viewDidAppear, viewWillDissapear, viewDidDissapear which gives more info than this, but you're correct this is achievable right now :)

[Jaafar-abusair]

@varungupta85 how to listen to bottomTabSelected?

[guyca]

@Jaafar-abusair https://github.com/wix/react-native-navigation/issues/648#issuecomment-271718783

[uunc]

+1

[guyca]

We added bottomTabSelected event which you can to globally. It returns the indices of the newly selected and the unselected tabs.

import {
  NativeAppEventEmitter,
  DeviceEventEmitter,
  Platform
} from 'react-native';

export default class TabSelectedListener {
  constructor(tabs) {
    this.tabs = tabs;
  }

  register() {
    const emitter = this.getEventEmitter();
    this.eventSubscription = emitter.addListener('bottomTabSelected', (event) => {
      console.log('tabSelected ', `selected: ${event.selectedTabIndex} unselected: ${event.unselectedTabIndex}`);
    });
  }

  unregister() {
    if (this.eventSubscription) {
      this.eventSubscription.remove();
    }
  }

  getEventEmitter() {
    return Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter;
  }
}

[Kureev]

It seems this issue can be closed by https://github.com/wix/react-native-navigation/issues/16#issuecomment-292791342.

Do we need to implement something else in the scope of it?

[guyca]

@Kureev This is the final implementation for the current scope, so lets close the issue for now as it has been addressed. Thanks for sorting things out 👍

[ianataffinity]

@guyca Just wondering why this isn't working with the bottomTabReselected event?

Just trying to use it so I can reset the screen if they have navigated 2-3 child screens down and tap the active nav icon again. Should reset to the top screen.