NavigationActions.reset is not a function?

Question

I created a project has a Welcome screen navigate to MainActivity screen. I want that when the user clicks the back button it will close the app in MainActivity not back to Welcome screen. I use the library react-navigation, so I looked for some solution from Github.

When I use the code from https://github.com/react-navigation/react-navigation/issues/295. I get the error:

NavigationActions.reset is not a function

I console.log(NavigationActions);

There is no reset obviously. But why can everybody else use the code?

I can't figure it out. Any help would be appreciated. Thanks in advance.

Here is my Welcome.js:

import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { ColorSetting } from './common/ColorSetting';
import { fetchMainMovieList } from '../actions';

class Welcome extends Component {
  static navigationOptions = {
    header: null,
  };

  componentDidMount() {
    // call main page data first
    this.props.fetchMainMovieList();

    this.timer = setTimeout(() => { 
      this.navigateToMainActivity();
    }, 3000);
  }
  componentWillUnmount() {
    // if this.timer existed，then use clearTimeout to remove it.
    this.timer && clearTimeout(this.timer);
  }

  navigateToMainActivity() {
    console.log(NavigationActions);
    const resetAction = NavigationActions.reset({
      index: 1,
      actions: [
        NavigationActions.navigate({ routeName: 'MainActivity' })
      ]
    });

    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return (
      <View>
        <Text>Three !</Text>
      </View>
    );
  }
}

export default connect(null, { fetchMainMovieList })(Welcome);

Possible duplicate of [undefined is not a function (evaluating'\_reactNavigation.NavigationActions.reset')](https://stackoverflow.com/questions/50443451/undefined-is-not-a-function-evaluating-reactnavigation-navigationactions-reset) — bennygenel, Jun 10 '18 at 06:23

Ali SabziNezhad · Accepted Answer · 2021-05-15T10:08:28.613

96

Update for V5.x:

import { CommonActions } from '@react-navigation/native';


const resetAction = CommonActions.reset({
    index: 1,
    routes: [{ name: YOUR_ROUTE_NAME, params: { YOUR_OPTIONAL_DATA } }]
});
navigation.dispatch(resetAction);

in version >2 of react navigation, you can use this code to reset stack:

    import { NavigationActions, StackActions } from 'react-navigation';
    const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
        });
    this.props.navigation.dispatch(resetAction);

I hope this will help...

edited May 15 '21 at 10:08

answered Jun 10 '18 at 06:28

Ali SabziNezhad

3,050
1
17
31

2

Yes, its the solution. Thank you very much ! – Morton Jun 10 '18 at 06:29
1

its not working in version 5.x. Try out this link for react-navigation 5 series https://stackoverflow.com/a/67543463/6380514 – Ankit Shukla May 15 '21 at 05:14

score 19 · Answer 2 · answered Jul 25 '18 at 16:56

19

If you're using a nested router you'll also need to set key to null otherwise it'll keep looking into currently active navigator.

import { NavigationActions, StackActions } from 'react-navigation'
const resetAction = StackActions.reset({
    index: 0,
    key: null, // <-- this
    actions: [NavigationActions.navigate({ routeName: route })]
})
this.props.navigation.dispatch(resetAction)

answered Jul 25 '18 at 16:56

mehulmpt

15,861
12
48
88

1

Thanks for your reply. – Morton Jul 26 '18 at 06:54
Even adding key to null, still looking into currently active navigator – Anil Ravsaheb Ghodake Aug 20 '18 at 07:09
1

@AnilGhodake all your navigators should be linked under 1 common navigator also. Otherwise there's no way for the library to know – mehulmpt Aug 21 '18 at 13:19
3

I have 3 stack navigators linked under a bottom tab navigator, using createBottomTabNavigator. Even when I add `key: null`, it's still looking into the currently active navigator =/ – kylebebak Oct 11 '18 at 20:26
Me too, added `key: null` but still looking into current navigator, like @kylebebak, mine is nested navigators (SwitchNavigator > DrawerNavigator > BottomTabNavigator, and current StackNavigator). – Jeaf Gilbert Jan 01 '19 at 07:26
2

I got it to work by setting `key: MyRouteThatHasTargetScreen` and `NavigationActions.navigate({ routeName: 'TargetScreen'})`. Hope this helps! – Jeaf Gilbert Jan 01 '19 at 07:39

score 2 · Answer 3 · answered Dec 25 '20 at 01:18

2

import { CommonActions,useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

const resetAction = CommonActions.reset({
        index: 0,
        routes: [{ name: 'MainActivity' }],});
      
       navigation.dispatch(resetAction);

document

If you're using react-navigation 5.0, you can do it this way

answered Dec 25 '20 at 01:18

nigranac

193
3
14

Can use in react navigation version 6 – Abbas.moosavi Sep 25 '21 at 20:34

score 0 · Answer 4 · answered Jun 03 '20 at 00:04

0

navigateToMainActivity(){
this.props.navigation.dispatch(StackActions.reset({
  index:0,
  actions:[
    NavigationActions.navigate({routeName:'MainActivity'})
  ] 
   })
  );
 }

answered Jun 03 '20 at 00:04

leandro ramos

1
1

3

While this might answer the question, you should [edit] your answer to include an explanation of *how* this answers the question. Answers that are little more than a code block are not very useful for those who might come across the same or a similar issue later on. – Hoppeduppeanut Jun 03 '20 at 00:28
1

It’d also be worth explaining why it might be preferable over the accepted answer from two years ago. From what I can tell it’s the exact same solution with slightly different syntax. – Jeremy Caney Jun 03 '20 at 01:55

Eme Hado · Answer 5 · 2020-06-23T16:38:17.867

0

In react-navigation v5, you can replace the splash screen with MainActivity Screen like this

import {StackActions} from '@react-navigation/native'; navigation.dispatch(StackActions.replace('MainActivity'));

edited Jun 23 '20 at 16:38

answered Jun 23 '20 at 16:30

Eme Hado

390
1
4
9

NavigationActions.reset is not a function?

5 Answers5

Linked