react-native-smooch
React Native wrapper for Smooch.io. Based off of smooch-cordova
This React Native module was built and tested with version 0.62.2 of React Native. Since React Native is not mature yet, there might be some breaking changes which will break our module. Therefore, if you find a problem, please open an issue.
At the moment, this wrapper only covers the most commonly used features of the Smooch SDK. We encourage you to add to this wrapper or make any feature requests you need. Pull requests most definitely welcome!
Please contact Myplanet for any questions.
Installing Smooch on React Native
First, make sure you've signed up for Smooch
If you don't already have a React Native application setup, follow the instructions here to create one.
Next, grab this React Native module with npm install @jdoc/react-native-smooch
For react-native 0.60 and above, linking is no longer necessary.
iOS
-
With CocoaPods, install by running
pod install
. -
Without CocoaPods, you can add Smooch by navigating to your React Native project's
ios
directory and following the manual steps here. -
Open your project's .xcworkspace file in XCode and initialize Smooch with your app id inside of applicationDidFinishLaunchingWithOptions.
#import <Smooch/Smooch.h>
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Initialize Smooch - these instructions are also available on [app.smooch.io](https://app.smooch.io)
SKTSettings *settings = [SKTSettings settingsWithIntegrationId:@"YOUR_INTEGRATION_ID"];
[Smooch initWithSettings:settings completionHandler:^(NSError * error, NSDictionary * userInfo) {
if (error != nil) {
// handle error state
} else {
// handle successful initialization
}
}];
}
You're now ready to start interacting with Smooch in your React Native app.
Android
You can easily add a binding to the Smooch Android SDK in your React Native application by following the instructions below.
- Add the
ReactNativeSmoochPackage
to the list of packages in yourReactApplication
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativeSmoochPackage()
);
}
- Add
Smooch.init
to theonCreate
method of yourApplication
class.
import io.smooch.core.Settings;
import io.smooch.core.Smooch;
import io.smooch.core.SmoochCallback;
import com.facebook.soloader.SoLoader;
public class MainApplication extends Application implements ReactApplication {
...
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
Smooch.init(this, new Settings("YOUR_INTEGRATION_ID"), new SmoochCallback() {
@Override
public void run(Response response) {
// Your code after init is complete
}
});
}
...
}
You're now ready to start interacting with Smooch in your React Native app.
Using Smooch in your React Native App
Require the module
import Smooch from "@jdoc/react-native-smooch";
Show the conversation screen
Smooch.show();
Get appUserId
async function getAppUserId() {
try {
var appUserId = await Smooch.getAppUserId();
console.log(`*** appUserId: ${appUserId}`);
} catch (e) {
console.error(e);
}
}
Set the fcm token
Smooch.setFirebaseCloudMessagingToken("FCM TOKEN");
Set the user's first name
Smooch.setFirstName("Kurt");
Set the user's last name
Smooch.setLastName("Osiander");
Set the user's email address
Smooch.setEmail("kurt@ralphgraciesf.com");
Set the user's sign up date
Smooch.setSignedUpAt(new Date().getTime());
Associate key/value pairs with the user
Smooch.setUserProperties({ whenDidYouFsckUp: "aLongTimeAgo" });