$ yarn add helpshift-react-native
$ react-native link helpshift-react-native
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜helpshift-react-native
and addRNHelpshift.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNHelpshift.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.helpshift.RNHelpshiftPackage;
to the imports at the top of the file - Add
new RNHelpshiftPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':helpshift-react-native' project(':helpshift-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/helpshift-react-native/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':helpshift-react-native')
import {
Platform,
Dimensions,
View
} from 'react-native';
import Helpshift from 'helpshift-react-native';
const user = {
identifier: 'YOUR_UNIQUE_ID', // required if no email
email: '[email protected]', // required if no identifier
name: 'Jane Doe', // optional
authToken: 'XXXXXXXX=' // required if User Identity Verification is enabled
}
const cifs = {
// 'key': ['type', 'value']
'number_of_rides': ['n', '12'],
'street': ['sl', '343 sansome'],
'new_customer': ['b', 'true']
}
// Where data types are mapped like so:
// singleline => sl
// multiline => ml
// number => n
// date => dt
// dropdown => dd
// checkbox => b
const config = {
apiKey: 'HELPSHIFT_API_KEY',
domain: 'HELPSHIFT_DOMAIN',
appId: Platform.select({ ios: 'HELPSHIFT_IOS_APP_ID', android: 'HELPSHIFT_ANDROID_APP_ID' }),
width: Dimensions.get('window').width,//iOS only
height: Dimensions.get('window').height - 300, //iOS only
user: user,
cifs: cifs
}
render() {
return (
<View>
<Helpshift config={config} style={{ flex: 1, height: 500, width: 300}} />
</View
)
}
import { Platform } from 'react-native';
import Helpshift from 'helpshift-react-native';
const apiKey = 'HELPSHIFT_API_KEY';
const domain = 'HELPSHIFT_DOMAIN';
const iosAppId = 'HELPSHIFT_IOS_APP_ID';
const androidAppId = 'HELPSHIFT_ANDROID_APP_ID';
const appId = Platform.select({ ios: iosAppId, android: androidAppId })
Helpshift.init(apiKey, domain, appId);
const user = {
identifier: 'YOUR_UNIQUE_ID', // required if no email
email: '[email protected]', // required if no identifier
name: 'Jane Doe', // optional
authToken: 'XXXXXXXX=' // required if User Identity Verification is enabled
}
Helpshift.login(user)
Helpshift.logout()
Helpshift.showConversation()
Helpshift.showFAQs()
With Custom Issue Fields (CIFs) (Documentation)
const cifs = {
// 'key': ['type', 'value']
'number_of_rides': ['n', '12'],
'street': ['sl', '343 sansome'],
'new_customer': ['b', 'true']
}
// Where data types are mapped like so:
// singleline => sl
// multiline => ml
// number => n
// date => dt
// dropdown => dd
// checkbox => b
Helpshift.showConversationWithCIFs(cifs)
// OR
Helpshift.showFAQsWithCIFs(cifs)
Helpshift.requestUnreadMessagesCount(); // returns Promise
// example usage
async _getUnreadMessagesCount(){
let count = await Helpshift.requestUnreadMessagesCount();
this.setState({ unreadMessages: count });
}