CODEWITHSUNDEEP
react-nativereact-navigation
Morton
Morton

Reputation: 5760

NavigationActions.reset is not a function?

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);

enter image description here

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);

Upvotes: 25

Views: 28676

Answers (5)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

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...

Upvotes: 97

nigranac
nigranac

Reputation: 203

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

Upvotes: 2

Eme Hado
Eme Hado

Reputation: 460

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'));

Upvotes: 0

leandro ramos
leandro ramos

Reputation: 1

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

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16577

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)

Upvotes: 19

Related Questions