import { HydrateStore, persist, GenerateStore } from "mobx-store-generator";
 
export type UserStoreProps = typeof StoreImpl;
 
class Store {
  @persist
  @observable
  public username?: string;
 
  @persist("object")
  @observable
  public funObject?: { name: string; titles: Array<string> };
 
  constructor() {
    this.username = "hello world!";
    this.funObject = {
      name: "Firaenix",
      titles: ["Software Developer"]
    };
  }
}
const StoreImpl = new Store();
 
// React Native
HydrateStore(AsyncStorage)("UserStore", StoreImpl);
 
// Web
HydrateStore(localStorage)("UserStore", StoreImpl);
 
export const UserStore = GenerateStore(StoreImpl);

import { observer } from 'mobx-react';
import { UserStore, UserStoreProps } from "./UserStore";
 
type HomePageProps = UserStoreProps;
 
export const HomePage = observer((props: HomePageProps) => {
  const userStore = UserStore.useStore();
 
  return <div>{userStore.username}</div>;
});

import { UserStore, UserStoreProps } from "./UserStore";
 
type HomePageProps = UserStoreProps;
 
@UserStore.inject
export class HomePage extends React.Component<HomePageProps> {
  public render() {
    return <div>{this.props.username}</div>;
  }
}

<UserStore.Provider>
  <App />
</UserStore.Provider>