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

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-dolphin-chat and add RNDolphinchat.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNDolphinchat.a, libRCTCameraRoll.a, libRNDeviceInfo.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. 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 the getPackages() method

• Add new RNDeviceInfo() to the list returned by the getPackages() 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;
  
      }
  }
  

2. 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')
   

3. 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')