A React Native wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc
Switch branches/tags
Nothing to show
Clone or download
iVanPan Merge pull request #28 from wanxger/master
Fix some syntax error.
Latest commit 2b62992 Jul 20, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Fix #22 Dec 16, 2017
asset update README Dec 13, 2016
demo update demo for RN 0.44+ Jul 31, 2017
ios update iOS SDK Jul 24, 2017
scripts update postlink script Jul 2, 2017
.gitignore update gitignore and move qq app id config to package.json Jun 27, 2017
.npmignore add demo Dec 13, 2016
LICENSE Initial commit Nov 25, 2016
README.md Fix some syntax error. Jul 20, 2018
index.js remove image type Jan 6, 2017
package.json release 0.8.2 Dec 16, 2017
react-native-qqsdk.podspec add podspec for react-native-qqsdk May 22, 2017



npm npm platform GitHub license

A React Native wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQ Zone Sharing etc.

Table of Contents


  1. QQ SSO Login
  2. QQ Logout
  3. QQ Share
  4. QZone Share
  5. QQ Favorites
  6. checkClientInstalled


npm install --save react-native-qqsdk@latest


 react-native link react-native-qqsdk


  1. Install package from npm
npm install --save react-native-qqsdk@latest
  1. Create a Podfile
  2. Add pod in Podfile something similar to this:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTWebSocket', # needed for debugging
   # Add any other subspecs you want to use in your project
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
pod "react-native-qqsdk", :path => "../node_modules/react-native-qqsdk"
  1. Pod install
  2. Follow step 7,8,9 in iOS Setup


npm install --save react-native-qqsdk@latest

iOS Setup

  1. Open your app's Xcode project

  2. Find the RCTQQSDK.xcodeproj file within the node_modules/react-native-qqsdk/ios directory and drag it into the Libraries node in Xcode

  3. Select the project node in Xcode and select the "Build Phases" tab of your project configuration.

  4. Drag libRCTQQSDK.a from Libraries/RCTQQSDK.xcodeproj/Products into the "Link Binary With Libraries" section of your project's "Build Phases" configuration.

  5. Click the plus sign underneath the "Link Binary With Libraries" list and add the libz.tbd,libiconv.tdb,libstdc++.tbd,libsqlite3.tbd,Security.framework,SystemConfiguration.framework,CoreTelephony.framework,CoreGraphics.framework library .

  6. Click the plus sign underneath the "Link Binary With Libraries" list and add the TencentOpenAPI.framework which locate in ../node_modules/react-native-qqsdk/ios/RCTQQSDK. Then Under the "Build Settings" tab of your project configuration, find the "Framework Search Paths" section and edit the value. Add a new value, $(SRCROOT)/../node_modules/react-native-qqsdk/ios/RCTQQSDK.

  7. Under the "Info" tab of your project configuration, find the "URL Types" section and add your app Id.

  8. Under the "Info" tab of your project configuration, add LSApplicationQueriesSchemes For QQ SDK. Add LSApplicationQueriesSchemes

  9. add following code to your AppDelegate.m

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];

Android Setup

  1. In your android/settings.gradle file, make the following additions:

    include ':app', ':react-native-qqsdk'
    project(':react-native-qqsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-qqsdk/android')
  2. In your android/app/build.gradle file, add the :react-native-qqsdk project as a compile-time dependency:

    dependencies {
        compile project(':react-native-qqsdk')
  3. add App ID to $RNProjectRoot/package.json

  "qq_app_id": "YOUR_QQ_APP_ID"

4.Update the MainApplication.java file to use react-native-qqsdk via the following changes:

// 1. Import the plugin class.
import me.vanpan.rctqqsdk.QQSDKPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new QQSDKPackage()


Support API

  1. ssoLogin
  2. Logout
  3. checkClientInstalled
  4. Share(see form below)
Platform iOS iOS   iOS   Android Android Android
ShareScene   QQ     QQZone QQ Favorite  QQ     QQZone QQ Favorite
Text        √       √     √          ✕         √     √      
Image        √     √   √        √     √   √    
News        √     √   √        √     √   √    
Audio    √     √   √        √     √   √    

Error Code

code explanation
404        QQ client not found
405        Android Activity not found
500        QQ share (QQZone, QQ, Favorite) error
503        QQ share (QQZone, QQ, Favorite) cancelled
600        QQ ssoLogin error
603        ssoLogin cancelled


This plugin support three Image types:

  1. Network URL
  2. Base64
  3. Absolute file path also support resolveAssetSource,for example, resolveAssetSource(require('./news.jpg')).uri


import * as QQ from 'react-native-qqsdk';
  .catch(()=>{console.log('not installed')});
import * as QQ from 'react-native-qqsdk';
  .then((result)=>{console.log('result is', result)})
  .catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
  .then((result)=>{console.log('result is', result)})
  .catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
  .then((result)=>{console.log('result is', result)})
  .catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg';
  .then((result)=>{console.log('result is', result)})
  .catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
import resolveAssetSource from 'resolveAssetSource';
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
const audioPreviewUrl = 'https://y.qq.com/portal/song/001OyHbk2MSIi4.html';
const audioUrl = 'http://stream20.qqmusic.qq.com/30577158.mp3';
const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg';
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
var url = 'https://graph.qq.com/user/get_user_info?access_token=' + accessToken + '&oauth_consumer_key= APPID &openid=' + userId;

About SDK

This plugin use 3.2.1 version sdk for Android,3.2.3 version sdk for iOS. You can download lastest version sdk here


Feel free to contribute


react-native-qqsdk is released under the MIT license. See LICENSE file for more information.