Callback on switching tabs about react-native-navigation HOT 21 CLOSED

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 :)

from react-native-navigation.

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;
  }
}

from react-native-navigation.

@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 👍

from react-native-navigation.

+1

from react-native-navigation.

+1

from react-native-navigation.

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.

from react-native-navigation.

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

from react-native-navigation.

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

from react-native-navigation.

+1

from react-native-navigation.

+1

from react-native-navigation.

+1

from react-native-navigation.

+1

from react-native-navigation.

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!

from react-native-navigation.

Any update on this guys?

from react-native-navigation.

@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

from react-native-navigation.

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.

from react-native-navigation.

@varungupta85 how to listen to bottomTabSelected?

from react-native-navigation.

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

from react-native-navigation.

+1

from react-native-navigation.

It seems this issue can be closed by #16 (comment).

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

from react-native-navigation.

@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.

from react-native-navigation.