How to get the current state of navigation

Question

I am using Navigator Navigator Navigator from https://reactnavigation.org/docs/navigators/tab , when I switch between tab screens, I do not get any navigation state in this.props.navigation.

Tab Navigator :

import React, { Component } from 'react'; import { View, Text, Image} from 'react-native'; import DashboardTabScreen from 'FinanceBakerZ/src/components/dashboard/DashboardTabScreen'; import { TabNavigator } from 'react-navigation'; render() { console.log(this.props.navigation); return ( <View> <DashboardTabNavigator /> </View> ); } const DashboardTabNavigator = TabNavigator({ TODAY: { screen: DashboardTabScreen }, THISWEEK: { screen: DashboardTabScreen } }); 

DISC SCREEN:

 import React, { Component } from 'react'; import { View, Text} from 'react-native'; export default class DashboardTabScreen extends Component { constructor(props) { super(props); this.state = {}; console.log('props', props); } render() { console.log('props', this.props); return ( <View style={{flex: 1}}> <Text>Checking!</Text> </View> ); } } 

I get the details on the toolbar screen when it first displays the component, but I don't get the details when I switch tabs. I need to get the current screen name ie TODAY or THISWEEK.

Answer 1

Your problem is that "screen tracking" react-navigation has an official guide for this. you can use onNavigationStateChange to track the screen using the built-in navigation container or write Redux middleware to track the screen if you want to integrate with Redux. More information can be found in the official guide: Screen-Tracking . The following is sample code from the manual using onNavigationStateChange :

 import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge'; const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID); // gets the current screen from navigation state function getCurrentRouteName(navigationState) { if (!navigationState) { return null; } const route = navigationState.routes[navigationState.index]; // dive into nested navigators if (route.routes) { return getCurrentRouteName(route); } return route.routeName; } const AppNavigator = StackNavigator(AppRouteConfigs); export default () => ( <AppNavigator onNavigationStateChange={(prevState, currentState) => { const currentScreen = getCurrentRouteName(currentState); const prevScreen = getCurrentRouteName(prevState); if (prevScreen !== currentScreen) { // the line below uses the Google Analytics tracker // change the tracker here to use other Mobile analytics SDK. tracker.trackScreenView(currentScreen); } }} /> ); 

Answer 2

First check all the properties like

 <Text>{JSON.stringify(this.props, null, 2)}</Text> 

Above the json array will show you the current state of navigation on the routeName index, i.e.

 this.props.navigation.state.routeName 

Answer 3

Have you tried to define navigationOptions in your route object?

 const DashboardTabNavigator = TabNavigator({ TODAY: { screen: DashboardTabScreen navigationOptions: { title: 'TODAY', }, }, }) 

You can also set navigationOptions to a callback that will be called using the navigation object.

 const DashboardTabNavigator = TabNavigator({ TODAY: { screen: DashboardTabScreen navigationOptions: ({ navigation }) => ({ title: 'TODAY', navigationState: navigation.state, }) }, }) 

Learn more about navigationOptions https://reactnavigation.org/docs/navigators/

Answer 4

When using "react-navigation": "^3.0.8" it can be accessed from the this.props.activeItemKey object using this.props.activeItemKey