MobX observable not refreshing in 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

Ok after some digging it seems its the RN view thats not updating. If I do a view refresh hack it displays. <Button title="Change Color" onPress={() => [this.props.booksStore.updateColor('yellow'), this.setState({ refresh: 1 })]} /> Any ideas? — barrylachapelle

barrylachapelle barrylachapelle · Accepted Answer · 2020-01-15T19:09:09

Anyone that comes across this... I forgot to decorate properly... durrrrr

decorate(BooksStore, {
    bookColor: observable, <<<<<<<<<<<<<
    testAction: action,
});

MobX observable not refreshing in React Native

1 Answers