React Native - StackActions.reset does nothing

Question

I have this function which gets executed when a <TouchableWithoutFeedback> area is pressed:

navigateToRentable = () => {
    console.log('in navigateToRentable');

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

I see in navigateToRentable in my console so I know the method is firing, but nothing else happens - there is no other output in the console.

Here is the structure of my Navigation:

CameraNavigator.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import RentScreenNavigator from './RentScreenNavigator';
import RentScreen from '../pages/RentScreen';
import CameraScreen from '../pages/CameraScreen';
import RentableScreen from '../pages/RentableScreen';

export default CameraNavigator = createStackNavigator(
  {
    OpenCamera: {
      screen: CameraScreen,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
    RentDetails: {
      screen: RentScreen,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
    Rentable: {
      screen: RentableScreen,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    }
  },
  {
    initialRouteName: 'Rent',
  },
);

CameraScreenNavigator.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import CameraNavigator from './CameraNavigator';

export default class CameraScreenNavigator extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <CameraNavigator/>
    )
  }
};

App.js

import React from 'react';
import { StyleSheet, Platform, Image, Text, View, ScrollView } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Icon } from 'react-native-elements';
import { createBottomTabNavigator } from 'react-navigation';
import firebase from 'react-native-firebase';
import { YellowBox } from 'react-native';

import HomeScreen from './pages/HomeScreen';
import ProfileScreen from './pages/ProfileScreen';
//import CameraScreen from './pages/CameraScreen';
import CameraScreenNavigator from './components/CameraScreenNavigator';
//import RentScreenNavigator from './components/RentScreenNavigator';

YellowBox.ignoreWarnings(['Class RCTCxxModule']);
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
YellowBox.ignoreWarnings(['You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.']);

const AppNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
    Rent: CameraScreenNavigator,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home';
        } else if (routeName === 'Profile') {
          iconName = 'user';
        } else if (routeName === 'Rent') {
          iconName = 'plus-square';
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return (
          <Icon
            name={iconName}
            color={tintColor}
            type='feather'
          />
        )
      }
    }),
    tabBarOptions: {
      activeTintColor: '#fff',
      inactiveTintColor: '#c9fffd',
      activeBackgroundColor: '#6de3dc',
      inactiveBackgroundColor: '#6de3dc'
    },
  },
);

export default class App extends React.Component {
  render() {
    return (
      <AppNavigator/>
    )
  }
}

As you can probably tell from the the StackActions.reset, I am trying to navigate to the Rentable route that is part of CameraNavigator, which is a child navigator the main App navigator. I am trying to execute the StackActions.reset from the Home route, which is part of the root App navigator.

In summary, nothing happens when I press the area that should navigate me to the Rentable route.

UPDATE

I have tried:

this.props
     .navigation
     .dispatch(
         NavigationActions.navigate({
           routeName: 'Rent',
           actions: [
              NavigationActions.navigate({
               routeName: 'Rentable',
             }),
           ]
         }),
     )

The first Navigation.navigate works, but the sub-action navigation to Rentable does not.

UPDATE

I am still seeking an answer as to why StackActions.reset isn't working - but for what I was trying to do (navigate to the page of a child navigator from the parent navigator)...I found a workaround/method proposed by @kashishgrover here: https://github.com/react-navigation/react-navigation/issues/2398

However it isn't a perfect workaround - it forces the app to go to an intermediary page, and then listen for a parameter, so for a split second - the intermediary page loads, and then it loads the intended page.

ewizard · Accepted Answer · 2018-09-14 01:37:44Z

6

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

I needed the correct combination of index, key, and routeName in actions. I also didn't need to navigate all the way to the Home page, only to the Rent page with intersects with the main App navigator.

answered Sep 14, 2018 at 1:37

ewizard

2,8924 gold badges56 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayke da Rosa Herbst Over a year ago

This was the only solution that worked for me to reset the stack and prevent go back action. Thank you.

ewizard Over a year ago

@MaykedaRosaHerbst yw, just glad im providing a valuable service to the internet!

David · Accepted Answer · 2020-02-19 13:57:52Z

0

To navigate between stacks I use:

    const navigateToScreen = routeName => {
        navigation.dispatch(StackActions.reset(StackActions.popToTop()))   
        navigation.dispatch(NavigationActions.navigate({ routeName })) 
    }

answered Feb 19, 2020 at 13:57

David

1218 bronze badges

Collectives™ on Stack Overflow

React Native - StackActions.reset does nothing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related