Update Setup Docs

Author: fbartho

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": [
+		"barthelemy",
+		"chua",
+		"cocoapod",
+		"cocoapods",
+		"jrichardlai",
+		"kachanovskyi",
+		"zanechua",
+		"zendesk",
+		"zopim"
+	]
+}

README.md

@@ -4,90 +4,124 @@ Simple module that allows displaying Zopim Chat from Zendesk for React Native.
 
 ## VERSIONS
 
-For RN version higher than 0.59 use version >= 0.3.0
-
-For RN version lower than 0.59 use version <= 0.2.2
+- For RN version higher than 0.59 use version >= 0.3.0 (Zendesk Chat v1)
+- For RN version lower than 0.59 use version <= 0.2.2 (Zendesk Chat v1)
 
 ## Known Issues
 
 ## Getting Started
 
 Follow the instructions to install the SDK for [iOS](https://developer.zendesk.com/embeddables/docs/ios-chat-sdk/introduction) and [Android](https://developer.zendesk.com/embeddables/docs/android-chat-sdk/introduction).
 
-### Manual install
+With npm:
 
-1. With npm:
+`npm install react-native-zendesk-chat --save`
 
-   `npm install react-native-zendesk-chat --save`
+or with yarn:
 
-   or with yarn:
+`yarn add react-native-zendesk-chat`
 
-   `yarn add react-native-zendesk-chat`
+### QuickStart & Usage
 
-#### iOS
+1. Setup Native Dependencies<br/> **iOS** If you're on react-native >= 0.60 and you have Cocoapods setup, then you just need to:
 
-2. Add a reference to your Podfile:
+```bash
+$ yarn install # and see if there are any errors
+$ (cd ios; pod install) # and see if there are any errors
+ # -- you may need to do `pod install --repo-update`
+```
 
-   `pod 'RNZendeskChat', :git => 'https://github.com/robertmurray/react-native-zendesk-chat.git'`
+If you're on older react-native versions, please see the [Advanced Setup](#advanced-setup) section below
 
-   then run pod install: `(cd ios; pod install)`
+**Android** If you're on react-native >= 0.60, Android should autodetect this dependency. You may need to call `react-native link`
 
-   or manually:
+1. Call the JS Initializer:
 
-   In Xcode, drag and drop `node_modules/react-native-zendesk-chat/RNZendeskChat.m` and `node_modules/react-native-zendesk-chat/RNZendeskChat.h` into your project.
+```javascript
+import ZendeskChat from "react-native-zendesk-chat";
 
-3. Configure `ZDCChat` in `AppDelegate.m`:
+// Once in your application:
+ZendeskChat.init("YOUR_ZENDESK_ACCOUNT_KEY");
+```
 
+1. Show the Chat UI
+
+```javascript
+// On button press, when you want to show chat:
+ZendeskChat.startChat({
+	name: user.full_name,
+	email: user.email,
+	phone: user.mobile_phone,
+	tags: ["tag1", "tag2"],
+	department: "Your department",
+});
 ```
+
+### Advanced Setup
+
+Advanced users, or users running on older versions of react-native may want to initialize things in native.
+
+#### iOS: Manually Setting up with Cocoapods
+
+If you're on iOS < 0.60, you may need to manually install the cocoapod:
+
+Add a reference to your Podfile:
+
+```Podfile
+pod 'RNZendeskChat', :git => 'https://github.com/taskrabbit/react-native-zendesk-chat.git'
+```
+
+then run pod install: `(cd ios; pod install)`
+
+or manually:
+
+In Xcode, drag and drop `node_modules/react-native-zendesk-chat/RNZendeskChat.m` and `node_modules/react-native-zendesk-chat/RNZendeskChat.h` into your project.
+
+#### iOS: Configure `ZDCChat` in `AppDelegate.m`:
+
+```objective-c
 #import <ZDCChat/ZDCChat.h>
 
+// ...
+
+// Inside the appropriate appDidFinishLaunching method
 [ZDCChat initializeWithAccountKey:@"YOUR_ZENDESK_ACCOUNT_KEY"];
+
+// And access other interesting APIs
 ```
 
-#### Android
+#### Android: Manual Setup & Configuration
+
+If you're on react-native < 0.60, you should be able to call `react-native link`.
+
+If this doesn't work, then you may need to do a complete manual install as follows:
 
-2. Open up `android/app/main/java/[...]/MainApplication.java`
+1. Open up `android/app/main/java/[...]/MainApplication.java`
 
 - Add `import com.taskrabbit.zendesk.*;` to the imports at the top of the file
 - Add `new RNZendeskChatPackage(this)` to the list returned by the `getPackages()` method
 
-3. Append the following lines to `android/settings.gradle`:
+1. Append the following lines to `android/settings.gradle`:
 
-```
+```gradle
 include ':react-native-zendesk-chat'
 project(':react-native-zendesk-chat').projectDir = new File(rootProject.projectDir,	'../node_modules/react-native-zendesk-chat/android')
 ```
 
-4. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
+1. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
 
-```
+```gradle
 compile project(':react-native-zendesk-chat')
 ```
 
-5. Configure `ZopimChat` in `android/app/main/java/[...]/MainActivity.java`
+1. Configure `ZopimChat` in `android/app/main/java/[...]/MainActivity.java`
 
-```
+```java
+// Note: there is a JS method to do this!
+// Call this once in your Activity's bootup lifecycle
 ZopimChat.init("YOUR_ZENDESK_ACCOUNT_KEY").build();
 ```
 
-## Usage
-
-In your code add:
-
-```
-import ZendeskChat from 'react-native-zendesk-chat
-
-...
-
-ZendeskChat.startChat({
-  name: user.full_name,
-  email: user.email,
-  phone: user.mobile_phone,
-  tags: ['tag1', 'tag2'],
-  department: "Your department"
-});
-```
-
 ## TODO
 
 - Allow setting form configuration from JS