Poor intrusive way to make A/B Testing by using an HoC instead of components.

---

---

Usage

Installation

$ npm install --save rn-ab-hoc

Component

/* list.js */

import abConnect from 'rn-ab-hoc';
import FlatList from './flatList.js';
import ListView rom './listView.js';
import OtherList rom './otherList.js';

export default abConnect('ListExperiment',
 { variant: 'FlatList', component: FlatList },
 { variant: 'ListView', component: ListView },
 { variant: 'OtherList', component: OtherList }
);

The previous code defines :

• An experiment name
• A list of different variants with their names and associated components

Using a random variant

/* app.js */

import React from 'react';
import List from './list';

export default function App() {
    return (
      <List />
    );
}

This will load one of the three previous components (variants) defined using a randomize function

Forcing a variant

/* app.js */

import React from 'react';
import List from './list';

export default function App() {
    return (
      <List variant="FlatList" />
    );
}

This will force a specific variant (maybe sent by your backend) to be used inside the app.

Note that the forced variant takes over the random one. If you set a variant by forcing it, the previous random one will be erased and replaced by the forced one. Inverse is not true.

Which variant am I using ?

/* app.js */

import React from 'react';
import List from './list';

export default function App() {
    return (
      <List
        variant="FlatList"
        onVariantSelect={(variant) => console.log(variant)}
      />
    );
}

This will print FlatList. It also work with random variants.

Storage

The default storage system is AsyncStorage with a key that follows the pattern :

abhoc-variant-${experiment}

In the previous case, it would have been :

abhoc-variant-ListExperiment