RNN screen decorator

decorator.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { actions as SettingsActions } from '../../ducks/settings';
import * as containerNames from '../../constants/containerNames';

const decorator = (ComposedComponent) => {
    const component = class extends Component {
        constructor(props) {
            super(props);
            props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
        }

        onNavigatorEvent = (event) => {
            console.debug('event.id:' + event.id);
            if (event.id === 'didAppear') {
                if (ComposedComponent.screenName) {
                    console.debug('CurrentlyVisibleScreen:' + ComposedComponent.screenName);
                    this.props.setContainerId(ComposedComponent.screenName);
                }
            } else if (event.id === 'backPress') {
                console.debug('handle back button press');
                if (ComposedComponent.screenName === containerNames.HOME_SCREEN) { // todo ugly fix
                    this.props.navigator.switchToTab({ tabIndex: 1 });
                }
            }
        };

        render() {
            return <ComposedComponent {...this.props} />;
        }
    };

    component.propTypes = {
        navigator: PropTypes.object.isRequired,
        setContainerId: PropTypes.func.isRequired,
    };

    function mapActionCreatorsToProps(dispatch) {
        return bindActionCreators(SettingsActions, dispatch);
    }

    return connect(undefined, mapActionCreatorsToProps)(component);
};

export default decorator;