title: MobX: Observed Component does not rerender after observable change
body: <p>I have a basic MobX setup in React Native, but my component does not rerender after an observable is getting updated and I can't seem to figure out why.</p>
  
  <p>react-native <em>0.56.1</em>; react <em>16.4.1</em>; mobx <em>4.5.0</em>; mobx-react <em>5.2.8</em></p>
  
  <p><strong>Store</strong></p>
  
  <pre><code>class AppStore {
    drawer = false;
    toggleDrawer = () =&gt; {
      this.drawer = !this.drawer;
    }
  }
  decorate(AppStore, {
    drawer: observable,
    toggleDrawer: action
  });
  
  const app = new AppStore();
  export default app;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>class _AppLayout extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        drawerAnimation: new Animated.Value(0)
      };
    }
  
    UNSAFE_componentWillReceiveProps(nextProps) {
      console.log('will not get called');
      if (this.props.app.drawer !== nextProps.app.drawer) {
        Animated.timing(this.state.drawerAnimation, {
          toValue: nextProps.app.drawer === true ? 1 : 0,
          duration: 500
        }).start();
      }
    }
  
    render() {
      console.log("will only be called on first render");
      const translateX = this.state.drawerAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -(width - 50)]
      });
  
      return (
        &lt;Animated.View style={[styles.app, { transform: [{ translateX }] }]}&gt;
          &lt;View style={styles.appContent}&gt;
            &lt;RouterSwitch /&gt;
          &lt;/View&gt;
          &lt;View style={styles.appDrawer} /&gt;
        &lt;/Animated.View&gt;
      );
    }
  }
  const AppLayout = inject("app")(observer(_AppLayout));
  </code></pre>
  
  <p><strong>Trigger (from different component)</strong></p>
  
  <pre><code>&lt;TouchableOpacity
    onPress={() =&gt; {
      app.toggleDrawer();
      // will reflect the new value
      console.log(app.drawer)
    }}
    style={styles.toggle}
  /&gt;
  </code></pre>
  
  <p>EDIT:
  After some investigation no rerender was triggered because I didn't use the store in the <code>render()</code> method, only in <code>componentWillReceiveProps</code>. This seems super weird to me?</p>
  
  <p>When I use the store in render, even by just assigning a variable, it starts working:</p>
  
  <pre><code>const x = this.props.app.drawer === false ? "false" : "true";
  </code></pre>