React navigation crashing when clicking anywhere on screen

Question

Android Emulator Environment: Pixel_3_XL_API_29

Whenever I use any react-navigation component such as stack or drawer in my expo-based app, and click anywhere on the screen with a mouse, it crashes. If I remove

<AppContainer />

in the below example, and replace it with

<LoginScreen/>

, everything works fine. Note: LoginScreen is just a blank screen with no logic of its own.

I can see the below error in adb logs

02-13 15:52:32.562   751   751 E MessageQueue-JNI: Exception in MessageQueue callback: handleReceiveCallback
02-13 15:52:32.562   751   751 E MessageQueue-JNI: java.lang.IllegalStateException: Already prepared or hasn't been reset
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandler.prepare(GestureHandler.java:7)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandlerOrchestrator.recordHandlerIfNotPresent(GestureHandlerOrchestrator.java:8)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandlerOrchestrator.recordViewHandlersForPointer(GestureHandlerOrchestrator.java:5)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandlerOrchestrator.traverseWithPointerEvents(GestureHandlerOrchestrator.java:12)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandlerOrchestrator.extractGestureHandlers(GestureHandlerOrchestrator.java:5)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.GestureHandlerOrchestrator.onTouchEvent(GestureHandlerOrchestrator.java:4)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.react.RNGestureHandlerRootHelper.dispatchTouchEvent(RNGestureHandlerRootHelper.java:2)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at abi36_0_0.host.exp.exponent.modules.api.components.gesturehandler.react.RNGestureHandlerRootView.dispatchTouchEvent(RNGestureHandlerRootView.java:1)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
02-13 15:52:32.562   751   751 E MessageQueue-JNI:      at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start -c",
    "doctor": "expo doctor",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "react-navigation-stack": "2.1.1",
    "react-navigation": "4.1.1",
    "axios": "0.19.2",
    "debounce": "1.2.0",
    "expo": "~36.0.0",
    "expo-secure-store": "~8.0.0",
    "native-base": "^2.13.8",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "^0.61.5",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "uuid": "3.4.0"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

App.js

import 'react-native-gesture-handler';
import React from "react";
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import MainMenu from './MainMenu'
import LoginScreen from './LoginScreen'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

 const navi = createStackNavigator({
 Login: {
    screen: LoginScreen,
  },
  Menu: {
    screen: MainMenu,
  }
}, {
    initialRouteName: 'Login',
  });


const AppContainer = createAppContainer(navi);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }
  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }
    return (<AppContainer />);
  }
}

Login Screen

import React from "react";
import { Container, Header, Body, Title, List, ListItem, Content, Text } from "native-base";
export default class MainMenu extends React.Component {
  constructor(props) 
  {
    super(props);
  }
  render() {
    return (
      <Container>
              <Header>
          <Body>
            <Title>Test</Title>
          </Body>
        </Header>
       <Content>
        </Content>
      </Container>
  );
  }
}

Note: I get the same error with react-navigation 4 and 5

score 0 · Answer 1 · answered Feb 14 '20 at 00:32

0

Have your tried clearing your cache?

Run the following:

expo start -c

If it doesn't work, try deleting your node_modules and yarn.lock, and then try again.

answered Feb 14 '20 at 00:32

satya164

9,464
2
31
42

score 0 · Answer 2 · answered Feb 19 '20 at 20:30

I had the same error. The problem is somewhere in react-native-gesture-handler package and as I see, it is not fixed yet.

Downgrade to version 1.4.0 or try this solution:

import 'react-native-gesture-handler';
...
if (Platform.OS === 'android') {
  const { UIManager } = NativeModules;
  if (UIManager) {
    // Add gesture specific events to genericDirectEventTypes object
    // exported from UIManager native module.
    // Once new event types are registered with react it is possible
    // to dispatch these events to all kind of native views.
    UIManager.genericDirectEventTypes = {
      ...UIManager.genericDirectEventTypes,
      onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
      onGestureHandlerStateChange: {
        registrationName: 'onGestureHandlerStateChange',
      },
    };
  }
}

React navigation crashing when clicking anywhere on screen

2 Answers2