nativescript-snapkit

NativeScript Snap Kit plugin

What!?

Glad you asked. This repo implements a NativeScript plugin for Snapchat's Snap Kit SDK. In its first iteration, this plugin only exposes the 'login' feature, called Login Kit. Feel free to open an issue requesting other features (other parts of the Snap Kit SDK are: Creative Kit, Bitmoji Kit, and Story Kit).

Installation

tns plugin add nativescript-snapkit

Configuration

Hop on over to the Snap Kit developer portal and create an app.

Android

Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

• Open App_Resources/AndroidManifest.xml and add the com.snapchat.kit.sdk.clientId as shown here.
• While you're there, also add com.snapchat.kit.sdk.redirectUrl as shown here.
• And lastly, com.snapchat.kit.sdk.SnapKitActivity as shown here (make sure you adjust that android:scheme!).

iOS

Documentation for setting up iOS is available here, but a lot of it has already been handled by the plugin. You'll need to:

• Open App_Resources/Info.plist and add the SCSDKClientId as shown here.
• While you're there, also add SCSDKRedirectUrl as shown here.
• And lastly, CFBundleURLTypes as shown here.

iOS startup wiring

When using Login Kit's features on iOS, you will need to require (not import) the plugin before the app is bootstrapped.

Failing to do so will mean Snapchat won't redirect back to your app after logging in.

Demo app

If you want to test logging in with your own Snapchat login, then the demo app is a good starting point. However, it only allows logging in with user eddyverbruggen so you'll need to update its configuration as mentioned above.

Follow these steps to install the demo app:

git clone https://github.com/EddyVerbruggen/nativescript-snapkit
cd nativescript-snapkit/src
npm i
# change the configuration, then: 
npm run demo.ios # or demo.android 

API (Login Kit)

login

The login function takes a boolean parameter (default false) indicating whether or not you want the plugin to retrieve user details.

import { LoginKit } from "nativescript-snapkit";
 
LoginKit.login(true)
    .then(result => console.log(`Login successful, details: ${JSON.stringify(result)}`))
    .catch(error => console.log(`Login failed. Details: ${error}`));

isLoggedIn

This function takes the same boolean parameter as login (default false). If false, this function will return a boolean. Otherwise it will return user details in case the user was indeed logged in, or false if he was not logged in.

import { LoginKit } from "nativescript-snapkit";
 
// use it either like this (no parameter, or 'false')
LoginKit.isLoggedIn()
    .then(loggedIn => console.log(`User was logged in? ${loggedIn}`));
 
// or use it like this, to get the details (in case the user was indeed logged in)
LoginKit.isLoggedIn(true)
    .then(result => {
      if (!result) {
        console.log(`User was not logged in.`);
      } else {
        console.log(`User was logged in. User details: ${JSON.stringify(result)}`)
      }
    });

logout

import { LoginKit } from "nativescript-snapkit";
 
LoginKit.logout()
    .then(() => console.log("Logged out"));