{"id":23532663,"url":"https://github.com/outbrain-inc/outbrain-react-native-component","last_synced_at":"2025-04-22T22:41:25.236Z","repository":{"id":38855323,"uuid":"226863171","full_name":"outbrain-inc/outbrain-react-native-component","owner":"outbrain-inc","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-19T00:15:37.000Z","size":3019,"stargazers_count":2,"open_issues_count":28,"forks_count":4,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T19:34:31.688Z","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/outbrain-inc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-09T12:13:17.000Z","updated_at":"2024-11-11T18:39:39.000Z","dependencies_parsed_at":"2024-11-12T17:02:43.516Z","dependency_job_id":"2544bec9-5b35-437f-ab5b-73a777ac5f35","html_url":"https://github.com/outbrain-inc/outbrain-react-native-component","commit_stats":null,"previous_names":["outbrain-inc/outbrain-react-native-component","outbrain/outbrain-react-native-component"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Foutbrain-react-native-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Foutbrain-react-native-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Foutbrain-react-native-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Foutbrain-react-native-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/outbrain-inc","download_url":"https://codeload.github.com/outbrain-inc/outbrain-react-native-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250337276,"owners_count":21414092,"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-12-25T23:12:13.372Z","updated_at":"2025-04-22T22:41:25.218Z","avatar_url":"https://github.com/outbrain-inc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Outbrain React Native Demo\n\nProject used [this tutorial](https://www.freecodecamp.org/news/how-to-publish-a-react-native-component-to-npm-its-easier-than-you-think-51f6ae1ef850/) for referene.\n\nuse `npm pack` to test locally\n\nSee the [Release Notes](release-notes.md) for the latest version details.\n\n## Installation\n\nUsing npm:\n\n```shell\nnpm install --save react-native-outbrain\n```\n\nor using yarn:\n\n```shell\nyarn add react-native-outbrain\n```\n\n## Widget Settings (AMPM)\n\n### Custom Clicks Handler (982) = enable\nMust be set so all click will be passed to the native function. if a feed is in use then change this setting to all the feed child widgets\n\n### Feed Manual Chunk Fetch (919) = enable\nOn ReactNative the native scroll will not work, managing the fetching of next cards is done from the app.\n\nIn general please refer to this [Outbrain Confluence page](https://confluence.outbrain.com/display/CATS/React+Native+Bridge+project)\n\n\n## Example Apps - Download Links\n\n[iOS Demo download link](https://install.appcenter.ms/users/oregev/apps/react-native-ios-demo/distribution_groups/public)\n\n[Android Demo download link](https://install.appcenter.ms/users/oregev/apps/react-native-android-demo/distribution_groups/public)\n\n\n## Usage\n\n### Import Outbrain Module\n\n```\nimport { OutbrainWidget } from 'react-native-outbrain'\n```\n\n### Example for displaying a regular widget\n\n```\n\u003cOutbrainWidget\n  url={\"http://mobile-demo.outbrain.com\"}\n  widgetId={\"MB_2\"}\n  installationKey={\"NANOWDGT01\"}\n  userId={this.state.IDFA}\n/\u003e\n```\n\n### Example for displaying a Smartfeed widget\n\n```\n\u003cOutbrainWidget\n  url={\"http://mobile-demo.outbrain.com\"}\n  widgetId={\"MB_1\"}\n  installationKey={\"NANOWDGT01\"}\n  ref={input =\u003e this.outbrainWidget = input}\n  userId={this.state.IDFA}\n/\u003e\n```\n\n### Example for detect scroll to bottom\n\n```\nisCloseToBottom ({layoutMeasurement, contentOffset, contentSize}) {\n  const paddingToBottom = 50;\n  return layoutMeasurement.height + contentOffset.y \u003e= contentSize.height - paddingToBottom;\n};\n\n\u003cScrollView\n  style={styles.container}\n  showsVerticalScrollIndicator={false}\n  onMomentumScrollEnd={({nativeEvent}) =\u003e {\n    if (this.outbrainWidget \u0026\u0026 this.isCloseToBottom(nativeEvent)) {\n      console.log(\"onMomentumScrollEnd - isCloseToBottom\")\n      this.outbrainWidget.loadMore()\n    }\n  }}\u003e\n```\n\n### GDPR \\ CCPA Support\n\nUse the following props to pass `OutbrainWidget` the GDPR or CCPA string from your app code.\n\nFor GDPR consent V1 use `consentV1`\nFor GDPR consent V2 use `consentV2`\nFor CCPA string use `ccpaString`\n\n\n```\n\u003cOutbrainWidget\n                url={\"http://mobile-demo.outbrain.com\"}\n                widgetId={\"MB_1\"}\n                installationKey={\"NANOWDGT01\"}\n                consentV1={\"1111111\"}\n                consentV2={\"2222222\"}\n                ccpaString={\"3333333\"}\n                style={{width: screenWidth*1}}\n                ref={input =\u003e this.outbrainWidget = input}\n                userId={this.state.IDFA}\n              /\u003e\n```\n\n### Example for getting IDFA\n\n```\nimport { IDFA } from 'react-native-idfa';\n\ncomponentDidMount() {\n  IDFA.getIDFA().then((idfa) =\u003e {\n    this.setState({ IDFA: idfa, });\n  })\n  .catch((e) =\u003e {\n    console.error(e);\n  });\n}\n```\n\n### Example for organic click custom listener\n\n```\n\u003cOutbrainWidget\n  url={\"http://mobile-demo.outbrain.com\"}\n  widgetId={\"MB_1\"}\n  installationKey={\"NANOWDGT01\"}\n  onOrganicClick={orgUrl =\u003e console.log(\"In App - click on: \" + orgUrl)}\n  style={{width: screenWidth*1}}\n  ref={input =\u003e this.outbrainWidget = input}\n  userId={this.state.IDFA}\n/\u003e\n```\n\n### Dark mode support\n\nTo enable dark mode, set `darkMode` in props to true.\n\n```\n\u003cOutbrainWidget\n  url={\"http://mobile-demo.outbrain.com\"}\n  widgetId={\"MB_1\"}\n  installationKey={\"NANOWDGT01\"}\n  onOrganicClick={orgUrl =\u003e console.log(\"In App - click on: \" + orgUrl)}\n  style={{width: screenWidth*1}}\n  ref={input =\u003e this.outbrainWidget = input}\n  userId={this.state.IDFA}\n  darkMode={true}\n/\u003e\n```\n\n### Development Setup\n\nEdit package.json with `\"react-native-outbrain\": \"../../\"`\n\n### Test a new version\n\n1. update version in package.json\n2. run `npm pack` --\u003e creates `eact-native-outbrain-1.0.3.tgz` for example.\n3. in /examples/examples/DemoProject `yarn add ../../react-native-outbrain-1.0.3.tgz`\n\n### Release a new version\n\n1. Edit version in package.json in root dir\n2. npm login\n3. npm publish\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutbrain-inc%2Foutbrain-react-native-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foutbrain-inc%2Foutbrain-react-native-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutbrain-inc%2Foutbrain-react-native-component/lists"}