For Expo Project

Please refer to Expo Native Wechat

Motivation

Most developers using React Native to build apps are not equipped with native developing skills, not to mention connecting their apps with WeChat.

Especially, WeChat OpenSDK is something pain in the ass because of shitty docs where lots of APIs are not clear and intuitive. To help developers using React Native, I tried as much as possible to create this library. And I hope you benefit from this and be less frustrated with WeChat.

Why

• Native WeChat is new, and many libraries like it are no longer maintained and keep up with the latest WeChat.
• Native WeChat supports both legacy and new React Native architecture.
• Native WeChat is a TurboModule that supports lazy loading, allowing for faster app startup.
• Supports TypeScript for better intellisense and easy-to-check typing errors.
• All Apis are promisified.

Getting Started

Register SDK

Before invoking any APIs, registering Native WeChat by invoking registerApp is essential.

import {registerApp} from 'native-wechat';

useEffect(()=>{
	return registerApp('wx964290141ebe9b7b');
}, [])

When invoking registerApp, there will be a listener to receive events from Wechat. registerApp returns a function to remove the listener, and no events will be received from Wechat.

Invoking API

Now is the time to invoke API. For example, we will send an auth request to Wechat and receive the code. You may use the API named sendAuthRequest here.

import {registerApp, sendAuthRequest} from 'native-wechat';
import {Button, Text} from 'react-native';
import {verifyWechatCode} from '@/api/auth/wechat'

useEffect(()=>{
	registerApp('wx964290141ebe9b7b');
}, [])

const onButtonClicked = async () =>{
  const {data: {code}} = await sendAuthRequest();
  
  await verifyWechatCode(code);
}

return <Button onClick={onButtonClicked}>
  <Text>Send Auth Request</Text>
</Button>

Most APIs in Native WeChat are promisified. So is sendAuthRequest which will return a promise. When the user confirms the request on Wechat, the promise is resolved to be data with a code. All promisifed APIs return a generic type named NativeWechatResponse.

export type NativeWechatResponse<T = Record<string, unknown>> = {
  type: string;
  errorCode: number;
  errorStr: string | null;
  data: T;
};

TypeScript Support

Native WeChat has full TypeScript support with comprehensive type definitions. All functions and types are exported, providing excellent IntelliSense and type checking.

Available Types

The library exports all necessary types for your use:

import {
  // Functions
  registerApp,
  sendAuthRequest,
  shareWebpage,
  isWechatInstalled,
  launchMiniProgram,
  requestPayment,
  // ... and more
  
  // Types
  NativeWechatResponse,
  SendAuthRequestResponse,
  LaunchMiniProgramResponse,
  UniversalLinkCheckingResponse,
  NativeWechatModuleConstants,
  WechatShareScene,
  WechatMiniprogramType,
  Recordable,
  
  // Constants
  NativeWechatConstants,
  
  // React Hooks
  useWechatInstalled,
} from '@xinkyy/react-native-wechat';

Type Usage Example

import {
  sendAuthRequest,
  SendAuthRequestResponse,
  NativeWechatResponse,
} from '@xinkyy/react-native-wechat';

async function handleWechatAuth() {
  try {
    // The return type is automatically inferred as SendAuthRequestResponse
    const result: SendAuthRequestResponse = await sendAuthRequest({
      scope: 'snsapi_userinfo',
      state: 'app-state',
    });
    
    // Access typed response data
    const code: string = result.data.code;
    const country: string = result.data.country;
    
    return code;
  } catch (error) {
    console.error('Wechat auth failed:', error);
  }
}

All API functions have complete type definitions, so your IDE will provide autocomplete suggestions and catch type errors during development.

Support

If you have trouble using this library, do not hesitate to open an issue. I am always here to help.