https://github.com/outbrain-inc/outbrain-react-native-component
https://github.com/outbrain-inc/outbrain-react-native-component
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/outbrain-inc/outbrain-react-native-component
- Owner: outbrain-inc
- Created: 2019-12-09T12:13:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T00:15:37.000Z (almost 3 years ago)
- Last Synced: 2025-03-29T19:34:31.688Z (about 1 year ago)
- Language: JavaScript
- Size: 2.88 MB
- Stars: 2
- Watchers: 9
- Forks: 4
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Outbrain React Native Demo
Project 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.
use `npm pack` to test locally
See the [Release Notes](release-notes.md) for the latest version details.
## Installation
Using npm:
```shell
npm install --save react-native-outbrain
```
or using yarn:
```shell
yarn add react-native-outbrain
```
## Widget Settings (AMPM)
### Custom Clicks Handler (982) = enable
Must 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
### Feed Manual Chunk Fetch (919) = enable
On ReactNative the native scroll will not work, managing the fetching of next cards is done from the app.
In general please refer to this [Outbrain Confluence page](https://confluence.outbrain.com/display/CATS/React+Native+Bridge+project)
## Example Apps - Download Links
[iOS Demo download link](https://install.appcenter.ms/users/oregev/apps/react-native-ios-demo/distribution_groups/public)
[Android Demo download link](https://install.appcenter.ms/users/oregev/apps/react-native-android-demo/distribution_groups/public)
## Usage
### Import Outbrain Module
```
import { OutbrainWidget } from 'react-native-outbrain'
```
### Example for displaying a regular widget
```
```
### Example for displaying a Smartfeed widget
```
this.outbrainWidget = input}
userId={this.state.IDFA}
/>
```
### Example for detect scroll to bottom
```
isCloseToBottom ({layoutMeasurement, contentOffset, contentSize}) {
const paddingToBottom = 50;
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};
{
if (this.outbrainWidget && this.isCloseToBottom(nativeEvent)) {
console.log("onMomentumScrollEnd - isCloseToBottom")
this.outbrainWidget.loadMore()
}
}}>
```
### GDPR \ CCPA Support
Use the following props to pass `OutbrainWidget` the GDPR or CCPA string from your app code.
For GDPR consent V1 use `consentV1`
For GDPR consent V2 use `consentV2`
For CCPA string use `ccpaString`
```
this.outbrainWidget = input}
userId={this.state.IDFA}
/>
```
### Example for getting IDFA
```
import { IDFA } from 'react-native-idfa';
componentDidMount() {
IDFA.getIDFA().then((idfa) => {
this.setState({ IDFA: idfa, });
})
.catch((e) => {
console.error(e);
});
}
```
### Example for organic click custom listener
```
console.log("In App - click on: " + orgUrl)}
style={{width: screenWidth*1}}
ref={input => this.outbrainWidget = input}
userId={this.state.IDFA}
/>
```
### Dark mode support
To enable dark mode, set `darkMode` in props to true.
```
console.log("In App - click on: " + orgUrl)}
style={{width: screenWidth*1}}
ref={input => this.outbrainWidget = input}
userId={this.state.IDFA}
darkMode={true}
/>
```
### Development Setup
Edit package.json with `"react-native-outbrain": "../../"`
### Test a new version
1. update version in package.json
2. run `npm pack` --> creates `eact-native-outbrain-1.0.3.tgz` for example.
3. in /examples/examples/DemoProject `yarn add ../../react-native-outbrain-1.0.3.tgz`
### Release a new version
1. Edit version in package.json in root dir
2. npm login
3. npm publish