wechat share for react native app on android platform

Register App on weixin open platform

Register your on https://open.weixin.qq.com

While registering your app, you will need app sign signature,
you can refer sign your app for weixin.

You will get your APPID after your app registered.
please keep it.

prepare wechat sdk for you app

add wechat sdk in android/app/build.gradle

dependencies {
    compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+'

set up AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

build native wechat to react native JS

I export wechat as "NativeModules.WeChat" follow below examples

The main java codes:

  1. WeChatModule, extends ReactContextBaseJavaModule, implements IWXAPIEventHandler
  2. WeChatPackage, new WeChatModule as NativeModules
  3. MainApplication::getPackages(), new WeChatPackage

To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).

public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {
    // ReactContextBaseJavaModule implementation
    public String getName() {
        return "RCTWeChat";
    // IWXAPIEventHandler implementation
    public void onReq(BaseReq baseReq) {

    public void onResp(BaseResp baseResp) {

    public void shareToTimeline(ReadableMap data, Callback callback) {
public class WeChatPackage implements ReactPackage {

  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();

  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new WeChatModule(reactContext));

    return modules;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;

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

Use in react native JS

import { NativeModules, } from 'react-native';
const { WeChat } = NativeModules;

Pease avoid RCT prefix issue.

You can get all codes by downloading my example app wechat-share-example.
It is a zip file, after you download it, Remember:

1. replace app id in .\android\app\src\main\java\com\wx\react\WeChatModule.java
2. replace package name to your package name.
3. run npm install before react-native run-android

The package name in the example is "com.errong.webrowser".
./android/app/BUCK:48: package = "com.errong.webrowser",
./android/app/BUCK:53: package = "com.errong.webrowser",
./android/app/build.gradle:100: applicationId "com.errong.webrowser"
./android/app/src/main/AndroidManifest.xml:2: package="com.errong.webrowser"
./android/app/src/main/java/com/webrowser/MainActivity.java:1:package com.errong.webrowser;
./android/app/src/main/java/com/webrowser/MainApplication.java:1:package com.errong.webrowser;

app id and package name should exactly same to the one you applied at
open.weixin.com which was mentioned at the beginning of this post.
otherwist, share feature maynot work well.

register app id to wechat

let's refer to offical guide


public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {
    private IWXAPI api = null;

    public WeChatModule(ReactApplicationContext context) {
        String appId = "YOURAPPID";
        api = WXAPIFactory.createWXAPI(this.getReactApplicationContext().getBaseContext(), appId, true);
        if (api != null)

Share to wechat time line

let's refer to offical guide


   public void shareToTimeline(ReadableMap data, Callback callback) {
       if (api == null) {
           Toast.makeText(getReactApplicationContext(), "App not registered to WeChat", Toast.LENGTH_SHORT).show();
       WXMediaMessage.IMediaObject mediaObject = _jsonToTextMedia(data);
       WXMediaMessage message = new WXMediaMessage();
       message.mediaObject = mediaObject;
       if (data.hasKey("title"))
           message.title = data.getString("title");
       if (data.hasKey("description"))
           message.description = data.getString("description");
       SendMessageToWX.Req req = new SendMessageToWX.Req();
       req.message = message;
       req.scene = SendMessageToWX.Req.WXSceneTimeline;
       req.transaction = UUID.randomUUID().toString();


import { NativeModules, } from 'react-native';
const { WeChat } = NativeModules;
var msg = {'id' : 'ABSTRACT_FETCHED', 'url' : window.location.href, 'title' : title, 'description' : desc, 'imgurl' : imgurl};
WeChat.shareToTimeline(msg, null);

Key points

  1. APPID and package name should same to the one you applied at open.weixin.qq.com
    sign your app for weixin
  2. sign your apk with your keystore file before you release.
    Generate Signed android APK for react-native app
  3. all sample codes download here

Subscribe to Post, Code and Quiet Time.

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.