Example mobx-state-tree and flow

example.jsx

// @flow
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import interact from 'interactjs';
import { observer, inject } from 'mobx-react';

type IItem = {
  id: string,
  posX: number,
  posY: number,
  text: string,
  width: string,
  height: string,
  backgroundColor: string,
  setPosition(x: number, y: number): void
};

type IUIStore = {
  items: Array<IItem>
};

type Props = {
  UIStore: IUIStore,
  ConfigUI: any,
  backgroundColor: string,
  posX: number,
  posY: number,
  width: string,
  height: string,
  text: string
};

@inject('ConfigUI', 'UIStore')
@observer
export default class Item extends Component {
  props: Props;
  interactable: null;

  constructor(props: Props) {
    super(props);
    console.log(this.props.ConfigUI.delta);
  }

  componentDidMount() {
    const context = this;
    this.interactable = interact(ReactDOM.findDOMNode(this));

    this.interactable.draggable({
      onend: function(event) {
        console.log('End!');
        console.log(context.props.UIStore.items[0].posX);
        console.log(context.props.UIStore.items[0].posY);
      },
      onstart: function(event) {
        console.log('Start!');
        console.log(context.props.UIStore.items[0].posX);
        console.log(context.props.UIStore.items[0].posY);
      },
      onmove: function(event) {
        console.log('Move!: ' + event);        
      }
    });
    
    if (this.interactable != null)
      this.interactable.on('tap', function(event) {
        console.log('Tap!:' + event);
      });
  }

  componentWillUnmount() {
    if (this.interactable != null) this.interactable.unset();
    this.interactable = null;
  }

  render() {
    const { posX, posY, width, height, backgroundColor, text } = this.props;
    return (
      <div
        style={{
          position: 'absolute',
          width: width,
          height: height,
          backgroundColor: backgroundColor,
          left: posX,
          top: posY
        }}
      >
        {text}
      </div>
    );
  }
}

Here we have autocomplete with flow and stores methods and properties. Check this tweet to understand the context of the gist: https://twitter.com/chemitaxis/status/885045691432800258