Annecy Media SDK for React Native
Use our API Docs for an awesome integration experience!
Install
$ npm i react-native-annecy-media --saveServices, Models and Views
import {
AnnecyService,
Offer,
TrackingView,
} from 'react-native-annecy-media';AnnecyService
| Method | Arguments | Notes |
|---|---|---|
| init | config Object
|
Initialize Annecy Media SDK |
| onScroll | none | Tell the SDK, that the user has scrolled a TableView
|
| getOffers | onLazyOffersLoaded Function
|
Returns a promise that resolves Offers |
| setRequestId | requestId String
|
If you're not using the getOffers method but your own service, you have to set the requestId manually |
| sendAndResetViews | none | If you're not using the getOffers method but your own service, you have to send and reset views manually |
TrackingView
A TrackingView will automatically handle views of your offers. Use it as a wrapper around your offer view.
<TrackingView id={offer.id}>
<Text>{offer.title}</Text>
</TrackingView>
| Attribute | Type | Notes |
|---|---|---|
| id | String |
Offer ID |
Offer
A Offer model represents a campaign.
| Key | Type | Example |
|---|---|---|
| attributes | Object |
{color: '#F00'} |
| costType | String |
"cpi", "cpa", "cps"
|
| credits | Number |
100 |
| ctaText | String |
"Finish the task!" |
| ctaTitle | String |
"Company Name" |
| id | String |
"foo" |
| isVisible | Boolean |
true |
| imageUrl | String |
"http://foo.com/bar.png" |
| payout | Number |
10 |
| text | String |
"Finish the task" |
| title | String |
"Company Name" |
| trackingUrl | String |
"http://foo.com/bar.html" |
| type | String |
Offer.TYPE.OFFER |
Example
export default class AppView extends Component {
constructor(props) {
super(props);
this._ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
isRefreshing: true,
offers: this._ds.cloneWithRows([])
};
AnnecyService.init({
country: 'US',
idfaGaid: '00000000-0000-0000-0000-000000000000',
locale: 'en',
token: 'annecy-media-token',
userId: 'foo'
});
}
componentDidMount() {
this._refreshOffers();
}
_refreshOffers() {
this.setState({isRefreshing: true});
AnnecyService.getOffers((updatedOffers) => {
this.setState({offers: this._ds.cloneWithRows(updatedOffers)});
}).then((offers) => {
this.setState({
isRefreshing: false,
offers: this._ds.cloneWithRows(offers)
});
}).catch(() => {
this.setState({isRefreshing: false});
});
}
_renderRow(offer) {
if (!offer.isVisible || offer.type !== Offer.TYPE.OFFER) {
return null;
}
return (
<TrackingView id={offer.id}>
<YourCustomRow offer={offer} />
</TrackingView>
);
}
_renderRefreshControl() {
return (
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._refreshOffers.bind(this)} />
);
}
render() {
return (
<ListView
dataSource={this.state.offers}
renderRow={this._renderRow.bind(this)}
onScroll={() => AnnecyService.onScroll()} // Do not bind!
refreshControl={this._renderRefreshControl()} />
);
}
}
