react-native-dolphin-chat
Getting started
$ react-native install react-native-dolphin-chat
Mostly automatic installation
$ react-native link react-native-dolphin-chat
Device info native module link
$ react-native link react-native-device-info
Manual installation
Running your react native script for dolphin chat
import {DolphinProfile,DolphinConnect,DolphinChatView} from 'react-native-dolphin-chat'
...
...
...
/**
* Prepare your customer profile here
*/
let profile = new DolphinProfile();
profile.username = "Customer Name";
profile.email = "customer.name@email.co.id";
profile.phone = "0817666266662";
/**
* Get singleton instance of Dolphin Messenger Connector
* Setup Your Avatar, Client Id, and Client Secret
*/
let dolphinConnect = DolphinConnect.getInstance(profile);
dolphinConnect.setAvatar('AvatarName',
'http://localhost/avatar_face.png');
dolphinConnect.configure("http://localhost:30000",
"bace1f70832485a08e8f90e1e805fc01","b3e2f69babb0b4f0e82dba565b89b478");
/**
* Render Chat User Interface for Your Customer
*/
return (
<DolphinChatView connector={dolphinConnect}
headerTitle={'Welcome to Dolphin Chat'}
headerTitleColor={'#fff'}
headerSubTitle={'Our agent will serve you shortly'}
headerSubTitleColor={'#fff'}
headerContainerHeight={130}
headerContainerPadding={20}
headerContainerBackgroundColor={'#3498db'}
headerAvatarHeight={102}
headerAvatarWidth={100}
enableAttachment={true}
headerAvatarSource={'http://localhost/avatar_face.png'}
closeTitle={'Close'}
welcomeMessage={'Hai'}
onClose={() => this.setState({currentView: "login"})}
/>
);
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-dolphin-chat
and addRNDolphinchat.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNDolphinchat.a
,libRCTCameraRoll.a
,libRNDeviceInfo.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
-
Add
import com.reactlibrary.RNDolphinchatPackage;
to the imports at the top of the file -
Add
new RNDolphinchatPackage()
to the list returned by thegetPackages()
method -
Add
new RNDeviceInfo()
to the list returned by thegetPackages()
method -
Add The following code on the MainActivity for permission resolution
public static final int PERMISSION_REQ_CODE = 1234; public static final int OVERLAY_PERMISSION_REQ_CODE = 1235; String[] perms = { "android.permission.ACCESS_FINE_LOCATION", "android.permission.CAMERA", "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE" }; @Override public void onCreate (Bundle savedInstanceState) { super.onCreate(savedInstanceState); checkPerms(); } public void checkPerms() { if(Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP_MR1) { if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); } for(String perm : perms){ if(checkSelfPermission(perm) == PackageManager.PERMISSION_DENIED){ requestPermissions(perms, PERMISSION_REQ_CODE); break; } } } } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { checkPerms(); } } @Override public void onRequestPermissionsResult(int permsRequestCode, String[] permissions, int[] grantResults){ switch(permsRequestCode){ case PERMISSION_REQ_CODE: checkPerms(); break; } }
- Append the following lines to
android/settings.gradle
:include ':react-native-dolphin-chat' project(':react-native-dolphin-chat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dolphinchat/android') include ':react-native-device-info' project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-dolphin-chat') compile project(':react-native-device-info')