Unable to resolve “fbjs/lib/areEqual” from “node_modules\react-native-gesture-handler\createHandler.js”

Question

I'm building a react-native application with expo, however, I have an error, therefore I'm unable to continue building the application. I even looked for the file in node_modules that is mentioned in the error message. I'm using the react-native-gesture-handler for my screen navigation. If I uninstalled the react-native-gesture-handler and I removed the navigation code would this solve my error? How do I resolve this?

App.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Plan from './screens/Plan';
import Home from './screens/Home';


const AppNavigator = StackNavigator({
  PlanScreen: { screen: Home },
  HomeScreen: { screen: Plan }
});

export default class App extends Component {
  render() {
    return (
      <AppNavigator/>
    )
  }
}

Home.js

import React, { Component } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import MyDatePicker from './Components/DatePicker.js'
import ImageSelector from './Components/ImageSelector.js'

export class Home extends Component {
   constructor(props) {
    super(props);
    this.state = {text: 'input'}
   }

  render() {
    return (
      <View>
        <Text>Plan Name:</Text> 
        <TextInput style={{height: 40, borderColor: 'black', borderWidth: 0.8}}
       onChangeText={(text) => this.setState({text})}
       value={this.state.text}/>

      <Button style={{ width: 50, alignSelf: "flex-end" }}
      title="Add Plan"
      onPress={() =>
        this.props.navigation.navigate('PlanScreen')}> 
        <MyDatePicker/>
        <ImageSelector/>
        </Button>
        </View>
      )
  }
}

Answer 1

I just solved this in my project by doing npm install fbjs.

fbjs utils has the desired (and missing) "areEqual": "fbjs/lib/areEqual",

Answer 2

You cannot insert a component into a button. Remove components.

Home.js

    return (
      <View>
        <Text>Plan Name:</Text> 
        <TextInput style={{height: 40, borderColor: 'black', borderWidth: 0.8}}
       onChangeText={(text) => this.setState({text})}
       value={this.state.text}/>

      <Button style={{ width: 50, alignSelf: "flex-end" }}
      title="Add Plan"
      onPress={() =>
        this.props.navigation.navigate('PlanScreen')} /> 
        </View>
      )

OR You can use TouchableOpacity

import {
  TouchableOpacity
} from 'react-native'
    <TouchableOpacity onPress={() => this.props.navigation.navigate('PlanScreen')} >
        <MyDatePicker/>
        <ImageSelector/>
    </TouchableOpacity>