{"id":4438,"url":"https://github.com/lwansbrough/react-native-ab","last_synced_at":"2025-03-17T00:33:40.908Z","repository":{"id":30858183,"uuid":"34415723","full_name":"lwansbrough/react-native-ab","owner":"lwansbrough","description":"A component for rendering A/B tests in React Native","archived":false,"fork":false,"pushed_at":"2018-01-30T21:29:43.000Z","size":120,"stargazers_count":181,"open_issues_count":3,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-11T07:14:15.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lwansbrough.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-22T21:02:01.000Z","updated_at":"2023-08-10T00:19:19.000Z","dependencies_parsed_at":"2022-09-06T05:40:22.936Z","dependency_job_id":null,"html_url":"https://github.com/lwansbrough/react-native-ab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwansbrough%2Freact-native-ab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwansbrough%2Freact-native-ab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwansbrough%2Freact-native-ab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lwansbrough%2Freact-native-ab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lwansbrough","download_url":"https://codeload.github.com/lwansbrough/react-native-ab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243835942,"owners_count":20355611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:11.985Z","updated_at":"2025-03-17T00:33:40.608Z","avatar_url":"https://github.com/lwansbrough.png","language":"JavaScript","readme":"# react-native-ab\n\nA component for rendering A/B tests in React Native.\n\n## Getting started\n\n1. `npm install react-native-ab@latest --save`\n\n## Obtaining your metrics\n\nOnce 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:\n\n- [Google Analytics (react-native-google-analytics)](http://github.com/lwansbrough/react-native-google-analytics)\n\n## Usage\n\nAll you need is to `require` the `react-native-ab` module and then use the provided tags (`\u003cExperiment\u003e`, and `\u003cVariant\u003e`).\n\n```javascript\n\nvar React = require('react-native');\nvar {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight\n} = React;\nvar { Experiment, Variant } = require('react-native-ab');\n\nvar rnabtest = React.createClass({\n  render: function() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTouchableHighlight onPress={this._resetExperiment}\u003e\n          \u003cView\u003e\n            \u003cExperiment\n              ref=\"welcomeExperiment\"\n              name=\"welcome-message\"\n              onChoice={(test, variant) =\u003e console.log(test, variant)}\n            \u003e\n              \u003cVariant name=\"standard\"\u003e\n                \u003cText style={styles.welcome}\u003e\n                  Welcome to React Native!\n                \u003c/Text\u003e\n              \u003c/Variant\u003e\n              \u003cVariant name=\"friendly\"\u003e\n                \u003cText style={styles.welcome}\u003e\n                  Hey there! Welcome to React Native!\n                \u003c/Text\u003e\n              \u003c/Variant\u003e\n              \u003cVariant name=\"western\"\u003e\n                \u003cText style={styles.welcome}\u003e\n                  Howdy, partner! This here is React Native!\n                \u003c/Text\u003e\n              \u003c/Variant\u003e\n            \u003c/Experiment\u003e\n          \u003c/View\u003e\n        \u003c/TouchableHighlight\u003e\n        \u003cText style={styles.instructions}\u003e\n          To get started, edit index.ios.js\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          Press Cmd+R to reload,{'\\n'}\n          Cmd+Control+Z for dev menu\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  },\n\n  _resetExperiment() {\n    this.refs.welcomeExperiment.reset();\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: 'center',\n    color: '#333333',\n    marginBottom: 5,\n  },\n});\n\nAppRegistry.registerComponent('rnabtest', () =\u003e rnabtest);\n```\n\n## `\u003cExperiment\u003e` Properties\n\n#### `name`\n\nThe name of your experiment, for example `\"welcome-message\"`.\n\n\n#### `choose`\n\nExample callback signature: `function(variants)`\nMust return an instance of `Variant`\n\nA function which should use a randomization algorithm to pick one of your variants. Defaults to a random selection using `Math.random()`\n\n#### `onChoice`\n\nExample callback signature: `function(experimentName, variantName)`\n\nCalled when a `Variant` has been chosen for your `Experiment`.\n\n#### `onRawChoice`\n\nExample callback signature: `function(experiment, variant)`\n\nSame as `onChoice`, but the objects passed are React component instances.\n\n## `\u003cExperiment\u003e` methods\n\nYou can access component methods by adding a `ref` (ie. `ref=\"welcomeExperiment\"`) prop to your `\u003cExperiment\u003e` element, then you can use `this.refs.welcomeExperiment.reset()`, etc. inside your component.\n\n#### `reset()`\n\nResets the experiment. The next time the experiment is rendered, a new variant may be chosen.\n\n#### `getActiveVariant()`\n\nReturns the currently displayed `Variant`.\n\n#### `getVariant(variantName)`\n\nReturns the instance of the specified `Variant` name.\n\n## `\u003cVariant\u003e` Properties\n\n#### `name`\n\nThe name of your variant, for example `\"western\"`.\n\n## Subviews\nOnly the `Variant` tag element exist within the `Experiment` element. `Variant` tags can contain only one *root* element.\n","funding_links":[],"categories":["Components"],"sub_categories":["Analytics"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flwansbrough%2Freact-native-ab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flwansbrough%2Freact-native-ab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flwansbrough%2Freact-native-ab/lists"}