title: MobX with React Native: store is undefined
body: <p>This is my first go at using MobX so this may be a simpler problem than I imagine, but I'm not getting any errors with the things I've tried; the store is simply undefined wherever I try to use it. I've tried both importing the store directly into components and passing props from the main file (also with , but I'm not sure if I used that right). I've experimented with several different .babelrc file settings as well, but that doesn't seem to be an issue.</p>
  
  <p>Here is the UserStore:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { observable } from 'mobx';
  
  class UserStore {
    @observable info = {
      username: "bob",
      password: "secret",
      email: "bob@email.com"
    }
  }
  
  const userStore = new UserStore()
  export default userStore;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a simplified App.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import Profile from './app/Profile.js';
  import { UserStore } from './app/UserStore.js';
  
  export default class App extends Component {
    constructor(){
      super();
      this.state = {
        page: 'Profile',
      }
    }
  
    changePage(){
      switch (this.state.page) {
        case "Profile":
          return &lt;Profile logout={this.logout.bind(this)} userStore={UserStore}/&gt;;
      }
    }
  
    render() {
      return (
        &lt;View&gt;
          {this.changePage()}
        &lt;/View&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is a simplified Profile.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { StyleSheet, Text, View, Button } from 'react-native';
  import { observer } from 'mobx-react/native';
  
  @observer
  export default class Profile extends Component {
  
    render() {
      console.log(this.props.userStore);
      return (
        &lt;View&gt;
          &lt;Text&gt;Profile Page&lt;/Text&gt;
          &lt;Text&gt;username: {props from store go here}&lt;/Text&gt;
          &lt;Text&gt;password: {props from store go here}&lt;/Text&gt;
          &lt;Text&gt;email: {props from store go here}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>All I'm trying to do right now is get the pre-defined observable "info" object from the store to the Profile.js component and display that information. This is being way more difficult than it should be - any insight is greatly appreciated!</p>