I want to get the name of the current routeName in react navigator. I came across three solutions:
1. const { routeName } = navigation.state.routes[navigation.state.index];
2. this.props.navigation.state.RouteName
3. const route = navigationState.routes[navigationState.index];
The first one seems to work fine. For the second one, I am not sure how to use it. The third option (as given in official documentation), generates the error with
ReferenceError: navigationState is undefined.
Please help me out in which is the correct way to find the name of the active screen while navigation.
function getActiveRouteName(navigationState) {
if (!navigationState) {
return null
}
const route = navigationState.routes[navigationState.index]
if (route.routes) {
return getActiveRouteName(route)
}
return route.routeName
}
// Example Usage
const currentScreen = getActiveRouteName(this.props.router);
if (currentScreen === 'Login') {
// do something
}
Related
I am getting route from react-native in one component as below:
const { route } = this.props;
const { fromPage } = route.params;
But sometimes the route is null 9perhaps it was not set when navigating), how to check if that is null before getting the value like above?
Should look at useNavigationState:
useNavigationState is a hook which gives access to the navigation state of the navigator which contains the screen. It's useful in rare cases where you want to render something based on the navigation state.
documentation
Probably you can use a conditional statement, as I have shown below.
const { route } = this.props;
if (route && route.params) {
const { fromPage } = route.params;
// use `fromPage` here
} else {
// handle the case where `route` or `route.params` is null
}
You can write like this:
const { fromPage } = this.route?.params || {}
fromPage param has type as string | undefined, you can check the condition of the param before using it
I'm quite new with Vue, and vue-router. Right now I'm working on a page where we organize tennis matches, I have this component called goBack, it basically checks your browser history entries and take you back to the previous one, similar to the back-arrow in your browser. So I have this behavior which I don't like, and I don't know how to change it => if I set match, pass you the URL, if you enter and click on my goBack Comp it will take you out of my page. I want to avoid that with this logic, if your last browser history entry is not inside my page I want to redirect you to my home.
Here's the goBack component code:
setup(props, { attrs }) {
const router = useRouter()
const { t } = useI18n()
const goBack = (): void => {
if (attrs.onClick) return
if (router.options.history.state.back === null) {
router.replace('/')
} else {
router.back()
}
}
return {
t,
goBack
}
}
})
</script>
Thank you!
I get the error mentioned in the title and solutions like this one do not seem to work.
The user starts on screen 1 and then goes to several other screens before ending up on screen 1 again. When the user goes to screen 1 (again) I want to pass some params (and somehow use thos params to force a re-render of that component). This is my code:
Screen 1
function Screen 1(props, { route, navigation }) {
...
const { itemId } = route.params;
console.log(itemId);
Screen X (the last screen the user visits before going back to screen 1)
onPress={() => {
props.navigation.navigate("Screen_1", { itemId: Doe });
}}
You cannot mix destructuring of props and the props object at the same time, hence the statement
function Screen1(props, { route, navigation }) { ... }
is not valid.
You need to either destructure everything you need from props or use the props object.
function Screen1({ route, navigation }) {
const { itemId } = route.params
}
or
function Screen1(props) {
const { itemId } = props.route.params
}
I am trying to pass a parameter by navigation screen. But when I receive the parameter at child screen it gives me undefined.
Parent Screen :
navigate('Screen2', {itemId: 'sales'})
Screen2
const { navigation } = this.props;
const id = navigation.getParam('itemId');
console.log(id);
Result :
Undefined
You can try this code
const { id } = this.props.navigation.state.params;
console.log(id);
OR
const id = this.props.navigation.state.params.id;
console.log(id);
Hope this works!
Parent Screen
this.props.navigation.push('Screen2', {itemId: 'sales'});
Screen2
const { id } = this.props.navigation.state.params;
console.log(id);
//Hope you're using react-navigation
It looks like, the way you are using getParams method is incorrect. Try following:
const id = this.props.navigation.getParam('itemId', 'defaultId');
Or else you can also use solutions by #Jothi Basu & #hong develop.
Use navigate.state.params
Screen2:
const id = this.props.navigation.state.params.itemId
I am trying to track screen names on react-native-firebase in conjunction with react-navigation.
Here is my code.
const tracker = firebase.analytics()
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;
}
export default class AppNavigation extends Component {
render() {
StatusBar.setBarStyle('light-content');
return (
<MainScreenNavigator
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.setCurrentScreen(currentScreen);
}
}}
/>
);
}
}
When I console log the screen names, they appear as desired. However, I'm not seeing the results in Firebase console. When I filter screen by name it just says (not set). Am I doing something wrong in my code? I am importing firebase from 'react-native-firebase' as well.
The code above is solid. It turns out you have to wait a half a day or so before data is populated. Not sure if I missed that in the docs. If you're using react-navigation and firebase, this code works!