React-native-navigation: [v6 Question] Can I get current stackID in component ?

[jedsada-jed]

Can I get current stackID in component ?

[jinshin1013]

@jedsada-jed As far as I know, there isn't an API to provide you with the current StackID. May I ask why you would need this feature?

[ikechukwukalu]

I'm facing the same issue.

@jedsada-jed As far as I know, there isn't an API to provide you with the current StackID. May I ask why you would need this feature?

And to reply your question. I'm using the bottomTab feature. I have icons on my topBar that show by default on every component within my bottomTab, which i set this way

Navigation.setDefaultOptions({
    topBar: {
      rightButtons: [
        {
          id: 'myChat',
          component: {
            id: 'myApp.Messages',
            name: 'com.myApp.Messages',
            passProps: {} // here is where i need too pass the componentId of the active component in my bottomTab
          }
        },
      ]
    }
});

So when i try to push from an imported js file:

export const Navs = {
    Chat: (id) => Navigation.push(id, { // I need to pass the prop.componentId
                            component: {
                                name: 'com.myApp.Chat'
                            } 
    })
}

onPress={() => Navs.Chat(this.props.id)} // I run this within com.myApp.Messages

I need a way to pass the component ID of the current stack. Else I would have to declare my topBar buttons within every component belonging to my bottomTabs.

[jinshin1013]

Hi @ikechukwukalu, unfortunately the library does not provide a built-in solution to get the current componentId or stackId. But you could be using componentDidAppear or componentDidDisappear events to manually track the currently visible componentId.

Although it's experimental but I've been attempting to do something similar here: https://github.com/jinshin1013/use-react-native-navigation as well. It isn't stable yet but you could build your own custom solution.

Else I would have to declare my topBar buttons within every component belonging to my bottomTabs.

To be honest, currently this might be the easiest solution that you could implement right now. I would though extract that into a function and just re-use throughout your applicable screens.

[jedsada-jed]

@jedsada-jed As far as I know, there isn't an API to provide you with the current StackID. May I ask why you would need this feature?

Sometimes i want to check current screen is root or not. I think that's easy if i can get StackID.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[hetmann]

@jinshin1013 @jedsada-jed

I have a similar situation when implementing deep linking into an app, to go to a specific screen we need the componentId of the active/current screen.

So here is my working simple solution

import { Navigation } from 'react-native-navigation';

// create a variable & set the value from nav events
let navComponent = null
Navigation.events().registerComponentDidAppearListener(event => navComponent = event)

// navComponent will have the following structure
{"componentId": "Component9", "componentName": "HomeScreen", "componentType": "Component", "passProps": {}}