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
https://facebook.github.io/react-native/docs/native-modules-android.html

The main java codes:

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

Important:
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     @Override     public String getName() {         return "RCTWeChat";     }          // IWXAPIEventHandler implementation     @Override     public void onReq(BaseReq baseReq) {     }      @Override     public void onResp(BaseResp baseResp) {     }               @ReactMethod     public void shareToTimeline(ReadableMap data, Callback callback) {     } } public class WeChatPackage implements ReactPackage {    @Override   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {     return Collections.emptyList();   }    @Override   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) {     @Override     public boolean getUseDeveloperSupport() {       return BuildConfig.DEBUG;     }      @Override     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

.\android\app\src\main\java\com\wx\react\WeChatModule.java

public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {     private IWXAPI api = null;      public WeChatModule(ReactApplicationContext context) {         super(context);         String appId = "YOURAPPID";         api = WXAPIFactory.createWXAPI(this.getReactApplicationContext().getBaseContext(), appId, true);         if (api != null)             api.registerApp(appId);     } 

Share to wechat time line

let's refer to offical guide

.\android\app\src\main\java\com\wx\react\WeChatModule.java

   @ReactMethod    public void shareToTimeline(ReadableMap data, Callback callback) {        if (api == null) {            Toast.makeText(getReactApplicationContext(), "App not registered to WeChat", Toast.LENGTH_SHORT).show();            return;        }        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();        api.sendReq(req);    } 

App.js

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