Defining a custom native event on React Native Android
<p>I am trying to define a custom event in my React Native app on Android. I have native View, which has a native Button. When the button is pressed, I want to send a message to my React Native Component to show a modal screen.</p>

<p>I have followed the examples but don't understand all the elements, and have done a bit of guesswork in my attempt. </p>

<p>In my ViewManager class:</p>

<pre><code>public class MyViewManager extends SimpleViewManager&lt;MyView&gt; {

    // Contructor etc...

    @Override
    protected MyView createViewInstance(ThemedReactContext themedReactContext) {
        //... Create and return the view 
    }

    /**
     * Custom native events
     * @return Map of additional events
     */
    @Override
    public @Nullable
    Map getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.of(
                "showModal",
                MapBuilder.of("registrationName", "onPressModalButton")
        );
    }
}
</code></pre>

<p>The custom View:</p>

<pre><code>public class MyView extends View {

    public MyView(Context c)
    {
        super(c);
    }

    public void showModal() {
        Log.d("MyView", "showModal");

        WritableMap event = Arguments.createMap();
        event.putString("showModal", "onPressModalButton");
        ReactContext reactContext = (ReactContext)getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                getId(),
                "showModal", 
                event);
    }
}
</code></pre>

<p>So I would like, each time <code>showModal</code> is called, for a JS event to be triggered to that I can show a modal view in the React Native app. </p>

<p>In my React Component I have:</p>

<pre><code>  class MyNativeComponent extends React.Component {
    static propTypes = {
      ...View.propTypes,
      onPressModalButton: React.PropTypes.func
    }
    render() {
      return &lt;MyView {...this.props} /&gt;
    }
  }

  const MyView = requireNativeComponent('MyView', MyNativeComponent, { nativeOnly: {showModal: true} })

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this._showModal = this._showModal.bind(this);
    }

    _showModal(event: Event) {

      console.log("showModal from React!")
        if (!this.props.onPressModalButton) {
          return;
        }
      this.props.onPressModalButton(event.nativeEvent.showModal);
    }

    //...
  }
</code></pre>

<p>What I don't understand is how the mapping works, and how I can define an event (like onChange in the <a href="https://facebook.github.io/react-native/docs/native-components-android.html" rel="nofollow">example</a>). </p>