Provide a poor obtrusive way to make A/B Testing by using an HOC instead of components

This way, extracting the AB implementation consists only of removing / modifying an import statement instead of code refactoring.

Installation

npm install --save react-native-ab-hoc

Usage

Now, let's imagine that you have two lists :

• One built with a FlatList inside of flatList.js
• One built with a ListView inside of listView.js

Let's create an AbTestFile :

// list.ab-test.js
import AbHoc from 'react-native-ab-hoc';
import FlatList from './flatList.js';
import ListView rom './listView.js';

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

Random variant

Inside of your app, let's do something like :

// app.js
import React from 'react';
import List from './list.ab-test';

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

This will load and store locally one of the two variant randomly (see randomize function)

Forced variant

You can force the chosen variant using a variant props :

// app.js
import React from 'react';
import List from './list.ab-test';

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

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.

Storage

By default, we're using AsyncStorage using a key that follows the pattern :

abhoc-variant-${experiment}-${variant}

In the previous case, it would have been :

abhoc-variant-ListExperiment-ListView