react High Order Components

component.js

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Alert
} from 'react-native';

import hoc from './hoc';

@hoc
export default class Component extends React.Component {
  constructor(props) {
    super(props)
  }

  hocFiredByHeaderButton = (str) => {
    Alert.alert("fired",str)
  }

  onButtonPress = (e) => {
    this.props.hoc.setState({ foo: "barbar" })
  }

  render() {
    return (
      <View style={{padding:30}}>
        <Text style={{textAlign:"center",marginBottom:10}}>component - {this.props.hoc.foo}</Text>
        <TouchableOpacity onPress={this.onButtonPress} style={{borderWidth:1}}>
          <Text style={{textAlign:"center"}}>[Button] change hoc.state.foo</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

componentHeader.js

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity
} from 'react-native';

export default class ComponentHeader extends React.Component {
  constructor(props) {
    super(props)
  }

  onButtonPress = (e) => {
    this.props.onHeaderButtonPress()
  }

  render() {
    return (
      <View style={{backgroundColor:"#fcc",paddingTop:50}}>
        <Text style={{textAlign:"center",marginBottom:10}}>Header</Text>
        <TouchableOpacity onPress={this.onButtonPress} style={{borderWidth:1}}>
          <Text style={{textAlign:"center"}}>[Button] fire event</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

hoc.js

import React from 'react';
import {
  View
} from 'react-native';

import ComponentHeader from './ComponentHeader';

export default (WrappedComponent) => {
  return class PP extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        foo: "bar"
      };

      this.childComponent = new WrappedComponent()
    }
    
    onHeaderButtonPress = (e) => {
      typeof (this.childComponent.hocFiredByHeaderButton) === "function") && this.childComponent.hocFiredByHeaderButton("hoge")
    }
    
    _hocSetState = (_state, _callback = () => { }) => {
      this.setState(_state, _callback)
    }

    _proc = (wrappedComponentInstance) => {
      this.childComponent = wrappedComponentInstance
    }
    
    render() {
      const hocProps = Object.assign({}, this.state, { setState: this._hocSetState })
      
      return (
        <View>
          <ComponentHeader onHeaderButtonPress={this.onHeaderButtonPress} />
          <WrappedComponent {...this.props} hoc={hocProps} ref={this._proc} />
        </View>
      )
    }
  }
}