How to get current navigation state
Solution 1
Your problem is about "Screen Tracking", react-navigation
has an officially guide for this. you can use onNavigationStateChange
to track the screen by using built-in navigation container or write a Redux middleware to track the screen if you want to integrate with Redux. More detail can be found at the officially guide: Screen-Tracking. Below is a sample code from the guide by 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);
}
}}
/>
);
Solution 2
Check all properties first, like
<Text>{JSON.stringify(this.props, null, 2)}</Text>
Above json array will show you current state of navigation under routeName index i.e.
this.props.navigation.state.routeName
Solution 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 invoked with the navigation object.
const DashboardTabNavigator = TabNavigator({
TODAY: {
screen: DashboardTabScreen
navigationOptions: ({ navigation }) => ({
title: 'TODAY',
navigationState: navigation.state,
})
},
})
Read more about navigationOptions https://reactnavigation.org/docs/navigators/
Related videos on Youtube
Ahsan Ali
WEB & MOBILE DEVELOPER I have been coding since 2014 and I love to make websites and mobile applications. I have command on the following tools, frameworks, and languages: HTML5 / CSS3 Bootstrap JavaScript / ECMAScript 6 React JS React Native PHP / MySQL / AJAX / JSON Wordpress (PHP) Laravel (PHP) CodeIgniter (PHP) SQL Server
Updated on June 08, 2021Comments
-
Ahsan Ali almost 3 years
I am using React Navigation's Tab Navigator from https://reactnavigation.org/docs/navigators/tab, when I switch between the Tab Screens I don't 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 } });
DASHBOARD 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 props at Dashboard Screen when it renders the component first but I don't get props when I switch the tabs. I need to get the current Screen name i.e TODAY or THISWEEK.
-
abadooz over 5 yearsThanks a lot it is help me to get screen and change the color of navigation buttom
-
Forhad about 4 yearsI need help. Please take a look at this problem - stackoverflow.com/questions/61799976/… @Vinod