How to solve this error in react native project with Mobx and react-nativation?

Question

Now I am trying to make an app with react native, Mobx, and Expo.

However, after I have installed Mobx and make Store with observable from Mobx, I got an error like below.

In addition to this information I mentioned, I am using some decorator like @observer and @inject, Provider.

Add my code of component with Provider.

import React from "react";
import { View, StyleSheet } from "react-native";
import { Provider } from "mobx-react/native";
import HomeHeader from "../Elements/Home/HomeHeader";
import HomeShopList from "../Elements/Home/HomeShopList";
import HomeAllCouponListButton from "../Elements/Home/HomeAllCouponListButton";
import HomeAllShopListButton from "../Elements/Home/HomeAllShopListButton";
import RestaurantStore from "../Stores/EachStores/RestaurantStore";

class Home extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <HomeHeader />
        <Provider restaurantStore={RestaurantStore}>
          <HomeShopList navigation={navigation} />
        </Provider>
        <HomeAllCouponListButton />
        <HomeAllShopListButton />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Answer 1

Your Provider store should have to configured properly:

It should have to be like.

<Provider restaurantStore={RestaurantStore}>

And not like below:

 <Provider store={RestaurantStore}> 

Please refer here

Also, try by changing the import statement from

import RestaurantStore from "../Stores/EachStores/RestaurantStore";

To :

import { RestaurantStore} from "../Stores/EachStores/RestaurantStore";