Sharing components between React web and Native

1-README.md

Sharing components between React Web and Native

- src
  | - components
  | - common
  | - native
  | - web

extended-class.js

// ValidateAndTrack.js
import * as React from 'react';

class ValidateAndTrack extends React.Component {
  trackExperimentSeen = () => {}
  validateUsage = () => {}
}


// ===========================
// Experiment.js
import * as React from 'react';
import ValidateAndTrack from './ValidateAndTrack';

class Experiment extends ValidateAndTrack {
  render() {
    this.trackExperimentSeen();
    this.validateUsage();
    
    return (
      <div>{props.children}</div>
    )
  }
}


// ===========================
// Experiment.native.js
import * as React from 'react';
import { View } from 'react-native';
import ValidateAndTrack from './ValidateAndTrack';

class Experiment extends ValidateAndTrack {
  render() {
    this.trackExperimentSeen();
    this.validateUsage();
    
    return (
      <View>{this.props.children}</View>
    )
  }
}


// ===========================
// Foo.js
import * as React from 'react';
import Experiment from './Experiment';

class Foo extends Component {
  render() {
    return (
      <Experiment> 
        <div>
          <p>Foo bar</p>
        </div>
      </Experiment>
    );
  }
}


// ===========================
// Foo.native.js
import * as React from 'react';
import { View, Text } from 'react-native';
import Experiment from './Experiment';

class Foo extends Component {
  render() {
    return (
      <Experiment> 
        <View>
          <Text>Foo bar</Text>
        </View>
      </Experiment>
    );
  }
}

HOC.js

// Experiment
import * as React from 'react';

const Experiment = (WrappedComponent) => {
  return class Experiment extends React.Component {
    trackExperimentSeen = () => {}
    validateUsage = () => {}
    render() {
      this.trackExperimentSeen();
      this.validateUsage();

      return <WrappedComponent {...this.props} />
    }
  }
}


// ===========================
// Foo.js
import * as React from 'react';
import Experiment from './Experiment';

class Foo extends React.Component {
  render() {
    return (
      <div>
        <p>Foo bar</p>
      </div>
    );
  }
}

export default Experiment(Foo);


// ===========================
// Foo.native.js
import * as React from 'react';
import { View, Text } from 'react-native';
import Experiment from './Experiment';

class Foo extends React.Component {
  render() {
    return (
      <View>
        <Text>Foo bar</Text>
      </View>
    );
  }
}

export default Experiment(Foo);

render-prop.js

// Experiment.js
import * as React from 'react';

class Experiment extends React.Component {
  trackExperimentSeen = () => {}
  validateUsage = () => {}
  render() {
    this.trackExperimentSeen();
    this.validateUsage();
    
    return this.renderProp(props);
  }
}


// ===========================
// MyComponent.js
// web
import * as React from 'react';
import Experiment from './Experiment';

class MyComponent extends React.Component {
  render() {
    return (
      <Experiment render={(props) => (
        <div>
          <p>Foo bar</p>
        </div>
      ))} />
    );
  }
}


// ===========================
// MyComponent.native.js
// native
import * as React from 'react';
import { View, Text } from 'react-native';
import Experiment from './Experiment';

class MyComponent extends React.Component {
  render() {
    return (
      <Experiment render={(props) => (
        <View>
          <Text>Foo bar</Text>
        </View>
      ))} />
    );
  }
}

sub-component.js

// Experiment.js
import * as React from 'react';

// Will import ./ExperimentRender.js for web, and Experiment.native.js for native
import ExperimentRender from './ExperimentRender';

class Experiment extends React.Component {
  trackExperimentSeen = () => {}
  validateUsage = () => {}
  render() {
    this.trackExperimentSeen();
    this.validateUsage();
    return (
      <ExperimentRender {...props} />
    );
  }
}

// ===========================
// ExperimentRender.js
import * as React from 'react';

const ExperimentRender = (props) => (
   <div>{props.children}</div>
);


// ===========================
// ExperimentRender.native.js
import * as react from 'react';
import { View } from 'react-native';

const Experiment = (props) => (
  <View>{props.children}</View>
);


// ===========================
// Foo.js
import * as React from 'react';
import Experiment from './Experiment';

class Foo extends Component {
  render() {
    return (
      <Experiment> 
        <div>
          <p>Foo bar</p>
        </div>
      </Experiment>
    );
  }
}


// ===========================
// Foo.native.js
import * as React from 'react';
import { View, Text } from 'react-native';
import Experiment from './Experiment';

class Foo extends Component {
  render() {
    return (
      <Experiment> 
        <View>
          <Text>Foo bar</Text>
        </View>
      </Experiment>
    );
  }
}