Skip to content

Lg0gs/react-native-tiktok

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

banner

GitHub License GitHub package.json version NPM Downloads NPM Unpacked Size PRs welcome! GitHub Repo stars

Get authorized and fetch user profile

v2 uses modern Tiktok Open SDK and legacy API is dropped, if your RN version < 0.69 then please refer v1

Prerequisites

It's mandatory to provide iOS Universal Link and Android App Link to the Tiktok Developers Portal in order to Tiktok App to be able to call your App when the operation is completed.

Check this article how to setup Deep Links in React Native, only iOS Setup: (skip 3) and Android Setup:

Install

npm install react-native-tiktok

or

yarn add react-native-tiktok

cd ios && pod install

Getting started iOS

The following are the minimum system requirements:

  • iOS version 11.0 or later
  • XCode version 9.0 or later

Register your app with the TikTok for Developers website

  1. Sign up for a developer account on the TikTok for Developers website.
  2. Create a new app, add the required details, and submit it for review.

Configure your Xcode project

  1. Open your Info.plist file and add or update the following key-value pairs:
<key>LSApplicationQueriesSchemes</key>
<array>
   <string>tiktokopensdk</string>
   <string>tiktoksharesdk</string>
   <string>snssdk1180</string>
   <string>snssdk1233</string>
</array>
<key>TikTokClientKey</key>
<string>$TikTokClientKey</string>
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>$TikTokClientKey</string>
   </array>
 </dict>
</array>

Note: Replace all $TikTokClientKey with your Client key retrieved from the developers portal

  1. Add the following code to your app's AppDelegate.swift file:
import TikTokOpenSDKCore

override func application(_ app: UIApplication,open url: URL, options:
    [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
      if (TikTokURLHandler.handleOpenURL(url)) {
          return true
      }
      return false
}

override func application(_ application: UIApplication, continue userActivity: NSUserActivity,
     restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
      if (TikTokURLHandler.handleOpenURL(userActivity.webpageURL)) {
          return true
      }
      return false
}

Getting Started Android

The minimum system requirement is an API level of 21: Android 5.0 (Lollipop) or later.

  1. Go to android/build.gradle file and add the maven repository
allprojects {
    repositories {
        maven { url "https://artifact.bytedance.com/repository/AwemeOpenSDK" }
    }
}
  1. Go to android/app/src/main/AndroidManifest.xml file after <application> tag before <activity add:

<meta-data android:name="TikTokClientKey" android:value="<TIKTOK_CLIENT_KEY>"/>

Expo Installation

This step is pretty straightforward and includes modification of only app.json file

"expo": {
  ...
  "plugins": [
    [
      "react-native-tiktok",
      {
        "tiktokClientKey": "<YOUR_TIKTOK_CLIENT_KEY>"
      }
    ]
  ]
}

Usage

import { authorize, Scopes } from 'react-native-tiktok';

authorize({
  redirectURI: '<YOUR_REDIRECT_URL>', // your universal link
  scopes: [Scopes.user.info.basic, Scopes.video.list, ...], // optional: "user.info.basic" will be included by default
  callback: (authCode, codeVerifier) => {
  // codeVerifier is returned only on Android
    console.log(authCode, codeVerifier);
  },
});

Use authCode to manage User Access Token