CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Jake Wansink
Jake Wansink

Reputation: 33

undefined is not an object (evaluating 'RNGuestureHandlerModule.state')

New to React-Native and when I try and and add the navigation module to my app it breaks.

  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);

When I got to run the code I get the error

"undefined is not an object (evaluating 'RNGuestureHandlerModule.state')"

I've tried running the sample code of react navigation and receive the same error.

Wondering if it's issue with my index.js file?

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

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

Upvotes: 1

Views: 750

Answers (1)

Jake Wansink
Jake Wansink

Reputation: 33

Managed to fix this issue by :

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

Upvotes: 2

Related Questions