A component for rendering A/B tests in React Native.
npm install react-native-ab@latest --save
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:
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);The name of your experiment, for example "welcome-message".
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()
Example callback signature: function(experimentName, variantName)
Called when a Variant has been chosen for your Experiment.
Example callback signature: function(experiment, variant)
Same as onChoice, but the objects passed are React component instances.
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.
Resets the experiment. The next time the experiment is rendered, a new variant may be chosen.
Returns the currently displayed Variant.
Returns the instance of the specified Variant name.
The name of your variant, for example "western".
Only the Variant tag element exist within the Experiment element. Variant tags can contain only one root element.