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 torequire thereact-native-ab module and then use the provided tags (<Experiment>, and<Variant>).
varReact=require('react-native');var{ AppRegistry, StyleSheet, Text, View, TouchableHighlight}=React;var{ Experiment, Variant}=require('react-native-ab');varrnabtest=React.createClass({render:function(){return(<Viewstyle={styles.container}><TouchableHighlightonPress={this._resetExperiment}><View><Experimentref="welcomeExperiment"name="welcome-message"onChoice={(test,variant)=>console.log(test,variant)}><Variantname="standard"><Textstyle={styles.welcome}> Welcome to React Native!</Text></Variant><Variantname="friendly"><Textstyle={styles.welcome}> Hey there! Welcome to React Native!</Text></Variant><Variantname="western"><Textstyle={styles.welcome}> Howdy, partner! This here is React Native!</Text></Variant></Experiment></View></TouchableHighlight><Textstyle={styles.instructions}> To get started, edit index.ios.js</Text><Textstyle={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+Control+Z for dev menu</Text></View>);},_resetExperiment(){this.refs.welcomeExperiment.reset();}});varstyles=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 ofVariant
A function which should use a randomization algorithm to pick one of your variants. Defaults to a random selection usingMath.random()
Example callback signature:function(experimentName, variantName)
Called when aVariant has been chosen for yourExperiment.
Example callback signature:function(experiment, variant)
Same asonChoice, but the objects passed are React component instances.
You can access component methods by adding aref (ie.ref="welcomeExperiment") prop to your<Experiment> element, then you can usethis.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 displayedVariant.
Returns the instance of the specifiedVariant name.
The name of your variant, for example"western".
Only theVariant tag element exist within theExperiment element.Variant tags can contain only oneroot element.