The app is crashing when I navigate while going back using pop()

Question

Initially, the app was working fine, after which I created a custom stack over Authenticated stack (screens when the user is Authenticated).

The app is crashing when I navigate while going back using pop(), but it works fine with navigate or goBack().

inActiveUser => Check for user touch events using Pan Responder, to log out when he is inactive.

AuthenticatedNavigator => Routes where the authenticated user is allowed.

New stack:

New Authenticated stack is implemented over Authentcated stack.

Panresponder

 "react-dom": "^16.12.0",
 "react-native": "0.61.5",
 "react-native-gesture-handler": "^1.5.3",
 "react-navigation": "^4.0.10",
 "react-navigation-drawer": "^2.3.3",
 "react-navigation-stack": "^2.0.10",

import React from 'react';
import UserActivity from 'utils/inactiveUser';
import AuthenticatedNavigator from '../AuthenticatedStack';

class CustomStack extends React.Component {
    panHandlers = {};

    userActivity;

    constructor(props) {
        super(props);
        this.userActivity = new UserActivity();
    }

    componentDidMount() {
        this.userActivity.startTimer();
        this.panHandlers = this.userActivity.panHandlers();
    }

    static router = AuthenticatedNavigator.router;

    render() {
        const { navigation } = this.props;
        return <AuthenticatedNavigator screenProps={{ ...this.panHandlers }} navigation={navigation} />;
    }
}

export default CustomStack;


/*******************************************/


TypeError: Cannot read property 'state' of undefined

This error is located at:
    in Navigator (at SceneView.js:9)
    in SceneView (at StackView.tsx:269)
    in RCTView (at CardContainer.tsx:171)
    in RCTView (at CardContainer.tsx:170)
    in RCTView (at Card.tsx:486)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:473)
    in PanGestureHandler (at Card.tsx:466)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:462)
    in RCTView (at Card.tsx:455)
    in Card (at CardContainer.tsx:138)
    in CardContainer (at CardStack.tsx:501)
    in RCTView (at CardStack.tsx:110)
    in MaybeScreen (at CardStack.tsx:494)
    in RCTView (at CardStack.tsx:93)
    in MaybeScreenContainer (at CardStack.tsx:401)
    in CardStack (at StackView.tsx:377)
    in KeyboardManager (at StackView.tsx:375)
    in RNCSafeAreaView (at src/index.tsx:26)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
    in SafeAreaProviderCompat (at StackView.tsx:372)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Unknown (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at DrawerView.tsx:183)
    in RCTView (at ResourceSavingScene.tsx:37)
    in RCTView (at ResourceSavingScene.tsx:26)
    in ResourceSavingScene (at DrawerView.tsx:175)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at DrawerView.tsx:164)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:539)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:535)
    in PanGestureHandler (at Drawer.tsx:525)
    in DrawerView (at DrawerView.tsx:251)
    in DrawerView (at createNavigator.js:80)
    in Navigator (at CustomStack/index.js:24)
    in CustomStack (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at src/index.js:52)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (at src/index.js:51)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in ChildrenWrapper (at wrapRootComponent.js:9)
    in _default (at wrapRootComponent.js:8)
    in Root (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)



TypeError: Cannot read property 'state' of undefined

This error is located at:
    in NavigationContainer (at src/index.js:52)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (at src/index.js:51)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in ChildrenWrapper (at wrapRootComponent.js:9)
    in _default (at wrapRootComponent.js:8)
    in Root (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)



BugReporting extraData: 
{AppRegistry.runApplication1: "Running "smemobileapp" with {"rootTag":21,"initialProps":{}}"}
AppRegistry.runApplication1: (...)
get AppRegistry.runApplication1: ƒ ()
set AppRegistry.runApplication1: ƒ ()
__proto__: Object

Link referred

https://medium.com/@benjaminwfox/share-state-between-screens-with-custom-navigators-in-react-navigation-62a34e3c7f97

https://reactnavigation.org/docs/en/custom-routers.html

React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined

Unable to access React instance (this) inside event handler

React-Native App getting crashed on navigate

score 0 · Accepted Answer · answered Feb 11 '20 at 14:31

I was passing the wrong object. {{...this.panHandlers}} instead of { ...this.panHandlers}

class CustomStack extends React.Component {
  panHandlers = {};

  userActivity;

  constructor(props) {
    super(props);
    this.userActivity = new UserActivity();
  }

  componentDidMount() {
    this.userActivity.startTimer();
    this.panHandlers = this.userActivity.panHandlers();
  }

  static router = AuthenticatedNavigator.router;

  render() {
    const {
      navigation
    } = this.props;
    return <AuthenticatedNavigator screenProps = { ...this.panHandlers
    }
    navigation = {
      navigation
    }
    />;
  }
}

The app is crashing when I navigate while going back using pop()

1 Answers1

Linked