undefined не является объектом (оценка 'RNGuestureHandlerModule.state')

Question

Впервые в React-Native, и когда я пытаюсь добавить модуль навигации в свое приложение, он выходит из строя.

  import React from 'react';
  import { createStackNavigator, createAppContainer} from 'react- 
  navigation';
  import { StyleSheet, Platform, Image, Text, View, ScrollView, 
  TextInput, Button, FlatList } from 'react-native';

  import firebase from 'react-native-firebase';

  import Todo from './Todo';


class HomeScreen extends React.Component {

constructor() {
    super();
    this.ref = firebase.firestore().collection('todos');
    this.unsubscribe = null;
    this.state = {
        textInput: '',
        loading: true,
        todos: [],
    };

}
async componentDidMount() {
  // TODO: You: Do firebase things
  // const { user } = await firebase.auth().signInAnonymously();
  // console.warn('User -> ', user.toJSON());

  // await firebase.analytics().logEvent('foo', { bar: '123'});
}

componentDidMount() {
  this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate)
}

componentWillUnmount() {
    this.unsubscribe();
}

updateTextInput(value) {
  this.setState({ textInput: value });
}

onCollectionUpdate = (querySnapshot) => {
  const todos = [];
  querySnapshot.forEach((doc) => {
    const { title, complete } = doc.data();
    todos.push({
      key: doc.id,
      doc, // DocumentSnapshot
      title,
      complete,
    });
  });
  this.setState({
    todos,
    loading: false,
  });
}

addTodo() {
  this.ref.add({
    title: this.state.textInput,
    complete: false,
  });
  this.setState({
    textInput: '',
  });
}




render() {
  if (this.state.loading) {
    return null; // or render a loading icon
  }
  return (
    <View style={{ flex: 1 }}>
        <Button
          title="Go to Jane's profile"
          onPress={() => navigate('Profile', {name: 'Jane'})}
        />
        <FlatList
          data={this.state.todos}
          renderItem={({ item }) => <Todo {...item} />}
        />
        <TextInput
            placeholder={'Add TODO'}
            value={this.state.textInput}
            onChangeText={(text) => this.updateTextInput(text)}
        />
        <Button
            title={'Add TODO'}
            disabled={!this.state.textInput.length}
            onPress={() => this.addTodo()}
        />
    </View>
  );
}

 }

 const AppNavigator = createStackNavigator({
   Home: {
    screen: HomeScreen
   }
 });

export default createAppContainer(AppNavigator);

Когда я запускаю код, я получаю ошибку

«undefined не является объектом (оценивается RNGuestureHandlerModule.state)»

Я попытался запустить пример кода реагирующей навигации и получил ту же ошибку.

Хотите знать, если это проблема с моим файлом index.js?

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Answer 1

удалось решить эту проблему:

rm -rf node_modules
npm install
npm install react-native-cli
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link