Sharing components between React web and Native - Wrapper

0-README.md

WRAPPER COMPONENT

TOC

• HOC
• Render prop
• Class extension
• Wrapper component

Sharing components

Our current setup with napps and wapp is a bit of a hassle when you have to work on feature that are cross-platform, with plenty of code duplication. Some of that duplication is unavoidable, but some of it could be removed with a strucutre where we are able to share more code between the platforms.

As long as we don't adopt a abstraction layer for markup (which we've tried and dismissed), views won't be shareable. In React language, we won't be able to share render methods with platform specific tags. There are also some feature that are tied to the platform, e.g. event listener, interaction handlers etc. Business logic on the other hand, could easily be shared.

Files

React Native’s Metro bundler has capabilities that are well-suited for what we need. It supports loading files with two different naming patterns:

• file.ios|android|native.js
• file.js

When a file is referenced, the bundler will first look for files with ios|andriod|native at that path, and if that is not found it will continue to just .jsfiles. We could use this to separate the files of a component

components/
  |- Foo.js
  |- Foo.native.js

In this example, Foo.js would be for tha wapp, and Foo.native.js for napps. Since we have more control of the bundling of files for the web project we could also use a naming convention with a .web suffix for web files.

Folder structure

We could create a component folder at the root of src/, where all shared components would be placed. This would make it easier to remember to work on them both for changes that are cross-plattform.

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

This does make the naming of the common folder a little odd though, since components are also a common resource with this approach. So a better structure might be

src/
  |- common/
    |- config/
    |- components/
    |- state/
  |- native/
  |- web/

or, simpler

src/
  |- config/
  |- components/
  |- native/
  |- state/
  |- web/

Examples

Trying to structure my thoughts on this matter I created a simple example (based on our <Experiment /> component) and implemented it in four different ways. Have a look.

• HOC
• Render prop
• Class extension
• Wrapper component

1-WebComponent.js

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

class Foo extends Component {
  render() {
    return (
      <Experiment> 
        <h1>Base</h1>
        <h1>Experiment</h1>
      </Experiment>
    );
  }
}

2-NativeComponent.js

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

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

3-Experiment.js

import * as React from 'react';
import ExperimentWrapper from './ExperimentWrapper';

class Experiment extends React.Component {
  // Methods are implementation details
  trackExperimentSeen = () => {};
  getVariant = () => {};

  render() {
    const { children } = this.props;
    this.trackExperimentSeen();
    const variant = this.getVariant();
    
    return <ExperimentWrapper>{children[variant]}</ExperimentWrapper>
  }
}

4-ExperimentWrapper.js

import * as React from 'react';

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

5-ExperimentWrapper.native.js

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

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