Injecting Store in React component results in Error - react-native

Question

I am trying inject a store to my React Component however I am getting the following error:
Undefined is not a function (evaluating 'decorator(target,property,desc)')
In my App.js I have:
import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import MeasurementsStore from './app/Stores/MeasurementsStore';
export default class PoolApp extends Component {
render() {
return (
<PoolComponent store="MeasurementsStore"/>
);
}
}
In my PoolComponent.js
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { AppRegistry, Text, View, TextInput , Picker, Button} from 'react-native';
#observer
export default class PoolComponent extends Component {
saveItems() {
console.log('Pressed save');
}
render() {
const store = this.props.store;
return (
<View>
<Text>Selecteer Pool</Text>
<Picker>
<Picker.Item label="Big" value="big"/>
<Picker.Item label="Small" value="small"/>
</Picker>
<Text>PH</Text>
<TextInput/>
<Text>Totaal Chloor</Text>
<TextInput/>
<Text>Vrij Chloor</Text>
<TextInput/>
<Button
title="Learn More"
color="#841584"
accessibilityLabel="Opslaan"
onPress={this.saveItems}
/>
</View>
);
}
}
And in MeasurementsStore.js I have
import {observable, action, computed} from 'mobx-react';
export default class MeasurementsStore {
#observable phValue = 0;
#observable freeChlorine = 0;
#observable totalChlorine = 0;
#observable totalAlkalinity = 0;
#action data(data: Object) {
if (data.phValue) {
this.phValue = data.phValue;
}
if (data.freeChlorine) {
this.freeChlorine = data.freeChlorine;
}
if (data.totalChlorine) {
this.totalChlorine = data.totalChlorine;
}
if (data.totalAlkalinity) {
this.totalAlkalinity = data.totalAlkalinity;
}
}
}

Answer 1

You don't need inject in this case. You are passing the store directly to your PoolComponent, so there is no need for it. You need to change a few things however:
Pass the actual store, not just the store name as a string, in App.js:
import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import measurementsStore from './app/Stores/MeasurementsStore';
export default class PoolApp extends Component {
render() {
return (
<PoolComponent store={measurementsStore}/>
);
}
Import from mobx and export an instance of MeasurementsStore in MeasurementsStore.js:
import {observable, action, computed} from 'mobx';
class MeasurementsStore {
#observable phValue = 0;
#observable freeChlorine = 0;
#observable totalChlorine = 0;
#observable totalAlkalinity = 0;
#action data(data: Object) {
if (data.phValue) {
this.phValue = data.phValue;
}
if (data.freeChlorine) {
this.freeChlorine = data.freeChlorine;
}
if (data.totalChlorine) {
this.totalChlorine = data.totalChlorine;
}
if (data.totalAlkalinity) {
this.totalAlkalinity = data.totalAlkalinity;
}
}
}
const measurementsStore = new MeasurementsStore();
export default measurementsStore;