/ Analytics

A component for rendering A/B tests in React Native

A component for rendering A/B tests in React Native

react-native-ab

A component for rendering A/B tests in React Native.

Getting started

  1. npm install [email protected] --save

Obtaining your metrics

Once you've got your A/B tests set up, you'll need a place to send the data. Check out these libraries for A/B testing:

Usage

All you need is to require the react-native-ab module and then use the provided tags (<Experiment>, and <Variant>).


var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;
var { Experiment, Variant } = require('react-native-ab');

var rnabtest = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._resetExperiment}>
          <View>
            <Experiment
              ref="welcomeExperiment"
              name="welcome-message"
              onChoice={(test, variant) => console.log(test, variant)}
            >
              <Variant name="standard">
                <Text style={styles.welcome}>
                  Welcome to React Native!
                </Text>
              </Variant>
              <Variant name="friendly">
                <Text style={styles.welcome}>
                  Hey there! Welcome to React Native!
                </Text>
              </Variant>
              <Variant name="western">
                <Text style={styles.welcome}>
                  Howdy, partner! This here is React Native!
                </Text>
              </Variant>
            </Experiment>
          </View>
        </TouchableHighlight>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  },

  _resetExperiment() {
    this.refs.welcomeExperiment.reset();
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('rnabtest', () => rnabtest);

<Experiment> Properties

name

The name of your experiment, for example "welcome-message".

choose

Example callback signature: function(variants)
Must return an instance of Variant

A function which should use a randomization algorithm to pick one of your variants. Defaults to a random selection using Math.random()

onChoice

Example callback signature: function(experimentName, variantName)

Called when a Variant has been chosen for your Experiment.

onRawChoice

Example callback signature: function(experiment, variant)

Same as onChoice, but the objects passed are React component instances.

<Experiment> methods

You can access component methods by adding a ref (ie. ref="welcomeExperiment") prop to your <Experiment> element, then you can use this.refs.welcomeExperiment.reset(), etc. inside your component.

reset()

Resets the experiment. The next time the experiment is rendered, a new variant may be chosen.

getActiveVariant()

Returns the currently displayed Variant.

getVariant(variantName)

Returns the instance of the specified Variant name.

<Variant> Properties

name

The name of your variant, for example "western".

Subviews

Only the Variant tag element exist within the Experiment element. Variant tags can contain only one root element.

GitHub

Comments