MobX observable not refreshing in React Native - react-native

Question

I am trying to hot refresh observable data in a react native view. The initial value is being displayed perfectly but does not refresh when I call an action from the store to change it. It is, however, being changed (I have another view where I can see the change) just not on the screen that calls the action to update. Any ideas? I am using React Navigation. Not sure if that is somehow interfering.
Store.js
import { observable, action, decorate, computed } from 'mobx'
class BooksStore {
bookColor = 'green'
testAction = () => {
console.log('change store value')
this.bookColor = 'blue'
}
}
decorate(BooksStore, {
loading: observable,
testAction: action,
});
export default new BooksStore();
App.js
import React from 'react';
import Routes from './Routes';
import { Provider } from 'mobx-react';
import BooksStore from './src/Stores/BooksStore';
export default function App() {
return (
<Provider booksStore={BooksStore}>
<Routes /> //react-navigation stacks
</Provider>
);
}
RN View:
import React, { Component } from 'react';
import { Image, View, Button, Alert, ScrollView, Dimensions, StyleSheet, Text } from 'react-native';
import { inject, observer, Observer} from 'mobx-react'
class MobX1 extends Component {
render() {
console.log(this.props.booksStore.bookColor)
return (
<View style={styles.container}>
//this displays initial store val but no refresh when I call testAction()
<Observer>{() =>
<Text style={{ marginBottom: 48 }}>{this.props.booksStore.bookColor}</Text>
}</Observer>
<Button
title="Change to Blue"
onPress={() => this.props.booksStore.testAction()} />
</View>
);
}
}
export default inject('booksStore')(observer(MobX1));
//------------------------------ styles -------------------------------//
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Thanks for any help

Answer 1

Anyone that comes across this... I forgot to decorate properly... durrrrr
decorate(BooksStore, {
bookColor: observable, <<<<<<<<<<<<<
testAction: action,
});