0.0.17 • Published 7 years ago
react-native-rokomobi v0.0.17
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 AwesomeProject
npm install react-native-rokomobi --save
npm 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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<string>QbFMYfZLnDdzhrJyZNCDetEiF0PlOtoxKk/gTeXj4C4=</string>
</plist>
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.
<Button
style={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 componentWillUnmount
subscriptionDeepLink.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 componentWillUnmount
subscriptionShare.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 -u
npm install
Troubleshooting
Reinstall npm and all npm_modules
sudo npm uninstall npm -g
rm -rf /usr/local/bin/react-native
npm 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