TaskQueue: Error with task: undefined is not an object (evaluating '_this.view._component.measureInWindow') in react native

Question

I am very new to react native, I am facing this issue with very simple demo app while handling screen navigation Getting this error message TaskQueue: Error with task: undefined is not an object (evaluating '_this.view._component.measureInWindow')

Here is screen shot of error :

here is my code App.js

import React, {Component} from 'react';
import {createStackNavigator} from 'react-navigation';
import HomeActivity from './components/HomeActivity';
import ProfileActivity from './components/ProfileActivity';
const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeActivity,
    },
    Profile: {
      screen: ProfileActivity,
    },
  },
  {
    initialRouteName: 'Home',
  },
);
export default class App extends Component {
  render() {
    return(
    <RootStack />
    );
  }
}

HomeActivity.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
class HomeActivity extends Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {backgroundColor: '#03A9F4'},
    headerTintColor: '#fff',
    headerTitleStyle: {fontWeight: 'bold'},
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Home Activity</Text>
        <Button
          title="Go to Profile Activity"
          onPress={() => this.props.navigation.navigate('Profile')}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  },
});
export default HomeActivity;

ProfileActivity.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
class ProfileActivity extends Component {
  static navigationOptions = {
    title: 'Profile',
    headerStyle: {backgroundColor: '#73C6B6'},
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Profile Activity</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Text style={styles.headerText}>Create a New Profile Screen </Text>
        <Button
          title="Go to new Profile"
          onPress={() => this.props.navigation.push('Profile')}
        />
        <Text style={styles.headerText}> Go Back </Text>
        <Button
          title="Go Back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  },
});
export default ProfileActivity;

 "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.1.4",
    "react": "16.11.0",
    "react-native": "0.62.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-paper": "2.1.3",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-navigation": "2.6.2"
  }

Answer 1

This happens becouse the react-navigate use old version of SafeView.

You have 2 ways:

1. Long way: need to migrate to v5 react-navigation v4 to v5 migration.

For me its difficult and will take too much changes in my project.

2. Very fast and ugly solution:

Go to the dir YOUR_PROJECT_PATH/node_modules/react-native-safe-area-view/index.js and update:

from:

this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => {

to:

this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight) => {

You can try my fork:

"react-navigation": "https://github.com/Snailapp/react-navigation.git#2.18.5",

UPDATED

Fixed warning with deprecated currentlyFocusedField:

https://github.com/Snailapp/react-navigation.git#2.18.6

UPDATED

Added support iPhone MAX version:

https://github.com/Snailapp/react-navigation.git#2.18.7

Answer 2

I can confirm, the second option Leonid suggested works, a few notes:

• v5 has too many breaking changes
• fork worked, but makes syncing updates extremely hard
• upgraded to v3, fixed this bug for me

Answer 3

For me this happened when I upgraded Expo to SDK 38. To fix this; delete the line, "react-native-safe-area-view": "whatever version" from your package.json file. Then run expo install react-native-safe-area-view. Running this command when no version of that package exists upgrades your installed package to the latest compatible (with Expo) version.

Answer 4

Went for the ugly solution pointed out by Leonid :D Since npm >= 2.0.0 local dependencies are supported, so I ended up adding react-native-safe-area-view to my repo and added

"dependencies": {
  ...
  "react-native-safe-area-view": "file:./dependencies/react-native-safe-area-view",
  ...
}

to my package.json. The folder will be copied to ./node_modules when running npm i

see: Local dependency in package.json

Edit:

React native does not seem to make use of symlinks, so you cant just import the local module like other modules. To make this work you need navigate to the root of the specific module and run npm pack to zip the module into a tarball. Then you need to run npm i ./path/to/tarball.tgz to install the local module. Now also react native should be able to reference the module.

Source: React Native: npm link local dependency, unable to resolve module, Waynes answer