React Native RokoMobi Plugin
- Plugin allows to integrate with RokoMobi Portal
Prerequisites
- Install npm here - https://nodejs.org/en/ or run in console
curl https://npmjs.org/install.sh | sh
- Install Node -
brew install node
- The React Native CLI -
npm install -g react-native-cli
Use original React Native Docs
Using Plugin
- Create a new React-Native
react-native init AwesomeProject
- Test application (ios)
react-native run-ios
- Install the plugin
cd AwesomeProjectnpm install react-native-rokomobi --savenpm install react-native-button --save
Set User
- [ios] Add code to your index.ios.js
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';import { NativeModules } from 'react-native';import Button from 'react-native-button'; export default class AwesomeProject extends Component { _handleSetUser() { var RMPortalManager = NativeModules.RMPortalManager; RMPortalManager.setUser({userName: 'Sergey'}, (error, events) => { if (error) { console.error(error); } else { console.log(events) } }) } _handleSetUserProperty() { var RMPortalManager = NativeModules.RMPortalManager; RMPortalManager.setUserCustomProperty({propertyName: 'Sex', propertyValue: 'Male'}, (error, events) => { if (error) { console.error(error); } else { console.log(events) } }) } render() { var RMLoggerManager = NativeModules.RMLoggerManager; RMLoggerManager.addEvent({name: 'Start', params : {location: '4 Privet Drive, Surrey', time: "10:00", description: 'abba'}}); return ( <View style={styles.container}> <Text style={styles.welcome}> </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> <Button style={{fontSize: 20, color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._handleSetUser()}> SetUser </Button> <Button style={{fontSize: 20, color: 'cyan'}} styleDisabled={{color: 'red'}} onPress={() => this._handleSetUserProperty()}> SetCustomUserProperty </Button> </View> ); }} const styles = 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('AwesomeProject', () => AwesomeProject);
- In the XCode's "Project navigator", right click on your project's Libraries folder ➜
Add Files to <...>
- Go to
node_modules
➜react-native-rokomobi
➜ios
➜ selectRCTRokoMobi.xcodeproj
- Add
libRCTRokoMobi.a
toBuild Phases -> Link Binary With Libraries
- Add ROKOMobi.Framework to
Build Phases -> Link Binary With Libraries
(it stores here../node_modules/react-native-rokomobi/ios/RokoMobiFramework
) - Open
Build settings
➜Framework Search Path
and add$(SRCROOT)/../node_modules/react-native-rokomobi/ios/RokoMobiFramework
- Recursive - Open
Build settings
➜Header Search Path
and add$(SRCROOT)/../node_modules/react-native-rokomobi/ios/RokoMobiFramework
- Recursive
- [ios] Add your credentials to Info.plist
QbFMYfZLnDdzhrJyZNCDetEiF0PlOtoxKk/gTeXj4C4=
Promo
Use RMPromoManager for Promo issues.
_handleLoadPromo() { var RMPromoManager = NativeModules.RMPromoManager; RMPromoManager.loadPromo(this.state.promoCode, (error, message) => { if (error) { console.error(error); } else { console.log(message) } })}
message is a dictionary with these fields
- applicability - Who can use discount (Unspecified, AllUsers, Segments)
- startDate - When the promo campaign starts
- endDate - When the promo campaign finishes
- isAlwaysActive - Indicates the promo campaign is forever. If this property is YES, values of startDate and endDate are not important
- isSingleUseOnly - The promo code can be used just once
- autoApplyOnAppOpen - Indicates if the discount should be applied automatically on app start
- cannotBeCombined - Indicates if the discount can be combined with other discounts
_handleMarkPromoCodeAsUsed() { var RMPromoManager = NativeModules.RMPromoManager; var params = {"promoCode":this.state.promoCode} RMPromoManager.markPromoCodeAsUsed(params, (error, events) => { if (error) { console.error(error); } else { console.log(events) } })}
params is a dictionary with these fields
- promoCode - Promo code to be marked
- valueOfPurchase - Purchase value. Needed for analytics
- valueOfDiscount - Total discount. Needed for analytics
- deliveryType - The way this promo code was obtained
Referral
Use RMReferralManager for Promo issues.
Use inviteFriends() function to show inviteFriends Dialog.
<Buttonstyle={styles.buttons3}onPress={() => NativeModules.RMReferralManager.inviteFriends()}>InviteFriends</Button>
_handleLoadReferralDiscountsList() { var RMReferralManager = NativeModules.RMReferralManager; RMReferralManager.loadReferralDiscountsList((error, events) => { if (error) { console.error(error); } else { console.log(events) } })} _handleLoadDiscountInfoWithCode() { var RMReferralManager = NativeModules.RMReferralManager; RMReferralManager.loadDiscountInfoWithCode(this.state.promoCode, (error, message) => { if (error) { console.error(error); } else { console.log(message) Alert.alert('_handleLoadDiscountInfoWithCode', message) } })}
message is a dictionary with these fields
- active - Indicates whether the campaign is active
- name- Company name
- recipientDiscount - ROKOReferralDiscountInfo
- rewardDiscount - ROKOReferralDiscountInfo
ROKOReferralDiscountInfo type is a dictionary with these fields
- enabled - Indicates whether the discount applying is possible
- value - Discount value
- limit - Discount limit. Applicable for ROKODiscountTypeMatching only
- type - Discount type
ROKODiscountType type is a dictionary with these fields
- ROKODiscountTypeUnspecified - Unknown discount type
- ROKODiscountTypePercent - Percent discount
- ROKODiscountTypeFixed - The discount value is fixed
- ROKODiscountTypeFree - The goods are absolutely free
- ROKODiscountTypeMatching - Matching discount
Deep Links
To handle Deep links - subscribe to handling.
const myModuleEvt = new NativeEventEmitter(NativeModules.RMEventEmitter)var subscriptionDeepLink = myModuleEvt.addListener( 'DeepLink', (data) => { console.log("DeepLink") console.log(data) });...// Don't forget to unsubscribe, typically in componentWillUnmountsubscriptionDeepLink.remove();
data is a dictionary with these fields
- name - Name of the link
- createDate - Date when the link was created
- updateDate - Date when the link was updated on Portal
- shareChannel - Share channel name
- vanityLink - Meaningful part of the link url (after domain)
- customDomainLink - Link with custom domain. For example, yourapp://link
- type - Type of the link (ROKOLinkType)
- referralCode - Referral code this link is targeted to
- promoCode - Promo code this link is targeted to
_handleCreateDeepLink() { var RMLinkManager = NativeModules.RMLinkManager; RMLinkManager.createLink({type: RMLinkManager.ROKOLinkTypeShare}, (error, events) => { if (error) { console.error(error); } else { console.log(events.linkURL) this.setState({deepLink : events.linkURL}) } })} _handleDeepLink() { var RMLinkManager = NativeModules.RMLinkManager; RMLinkManager.handleDeepLink(this.state.deepLink, (error, data) => { if (error) { console.error(error); } else { console.log(data) Alert.alert('handleDeepLink', data.createDate +'\n'+ data.type + '\n' + data.name) } })}
data has the same fields as data on handling events.
Share
_handleShare() { var RMShareManager = NativeModules.RMShareManager; var params = {contentId: this.state.contentId RMShareManager.share(params, text: this.state.shareText})} const myModuleEvt = new NativeEventEmitter(NativeModules.RMEventEmitter)var subscriptionShare = myModuleEvt.addListener( 'ShareStatus', (data) => { if (data.channel == NativeModules.RMShareManager.ROKOShareChannelTypeEmail) { console.log("it was EMAIL") } if (data.status == "Canceled") { console.log("status is Canceled") } console.log(data) }); ...// Don't forget to unsubscribe, typically in componentWillUnmountsubscriptionShare.remove();
Other fields of Params are :
-
contentId - Unique identifier of sharing content.*** [required field] ***
-
displayMessage - Default comment for sharing content
-
text - Text to be shared
-
contentTitle - Title of sharing content
-
contentURL - URL of sharing content
-
linkId - Identifier of sharing portal link. Set this property if you share deep link to get correct reports on ROKO portal.
-
ShareChannelTypeFacebook - Sets special text for Facebook only
-
ShareChannelTypeTwitter - Sets special text for Twitter only
-
ShareChannelTypeMessage - Sets special text for SMS only
-
"data.status" can be:
-
Done - Successfully shared,
-
Canceled - Sharing dialog canceled by user
-
Failed - Sharing failed
_handleShareCompleteForChannel() { var RMShareManager = NativeModules.RMShareManager; var param = {channelType: "sms",contentId: this.state.contentId} RMShareManager.shareCompleteForChannel(param, (error, data) => { if (error) { console.error(error); } else { console.log(data) } })}
Other fields of Params are :
- contentId - Unique identifier of sharing content.*** [required field] ***
- channelType - "sms", "twitter", "facebook", "email" or "copy"
- linkId - Optional Identifier of sharing portal link. Set this property if you share deep link to get correct reports on ROKO portal.
How to update npm plugins (RokoMobi too ;) )
- Install console tool ncu
npm install -g npm-check-updates
- Check updated npm modules
ncu
- Update all modules
ncu -unpm install
Troubleshooting
Reinstall npm and all npm_modules
sudo npm uninstall npm -grm -rf /usr/local/bin/react-nativenpm install npm@latest -g
To reinstall all modules in your project-
rm -rf node_modules && npm install
More Info
- For more information about RokoMobi integration the documentation