React Native Zalo
Android | iOS |
---|---|
Installation
yarn add rn-zalo or npm i rn-zalo --save
Zalo SDK Documents
- iOS: https://developers.zalo.me/docs/sdk/ios-sdk-9
- Android: https://developers.zalo.me/docs/sdk/android-sdk-8
Manual installation
iOS
cd ios && pod install
1. Install pod: Main target setting -> info -> URL types -> click +
2. Add url type identifier = “zalo”, URL Schemes = “zalo-<YOUR_APP_ID>”
AppDelegate.m
3. Open #import <ZaloSDK/ZaloSDK.h>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... [[ZaloSDK sharedInstance] initializeWithAppId:@"<YOUR_APP_ID>"]; return YES;} - (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options { return [[ZDKApplicationDelegate sharedInstance] application:application openURL:url options:options];}
4. Clear and Run your project
Android
android/app/src/main/java/[...]/MainApplication.java
1. Open up - Add
import com.zing.zalo.zalosdk.oauth.ZaloSDKApplication;
to the imports - Add
ZaloSDKApplication.wrap(this)
on "onCreate" function
android/app/src/main/java/[...]/MainActivity.java
2. Open up import android.content.Intent;
import com.zing.zalo.zalosdk.oauth.ZaloSDK;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
...
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
ZaloSDK.Instance.onActivityResult(this, requestCode, resultCode, data);
}
}
android/app/build.gradle
3. Insert the following lines inside the dependencies block in implementation "com.zing.zalo.zalosdk:core:+"implementation "com.zing.zalo.zalosdk:auth:+"implementation "com.zing.zalo.zalosdk:openapi:+"
android/app/src/main/res/values/strings.xml
4. Add appId to <resources>
<string name="app_name">App Name</string>
<string name="appID"><YOUR_APP_ID></string>
</res>
android/app/src/main/res/AndroidManifest.xml
5. Add code bellow to <application
...
<meta-data
android:name="com.zing.zalo.zalosdk.appID"
android:value="@string/appID" />
<activity
android:name="com.zing.zalo.zalosdk.oauth.BrowserLoginActivity">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="zalo-[appid]" />
<!-- Lưu ý: thay [appid] bằng id của ứng dụng lấy trên trang developers --!>
</intent-filter>
</activity>
</application>
proguard-rules.pro
file add code below
6. Open -keep class com.zing.zalo.**{ *; }-keep enum com.zing.zalo.**{ *; }-keep interface com.zing.zalo.**{ *; }
Usage
;;; Component { superprops; thisstate = data: null ; } login = async { try const data = await RNZalo; this; catch e console; }; { RNZalo; }; { if !thisstatedata return null; const birthday gender id picture name = thisstatedatauser; return <View style=stylesuserInfoContainer> <Text style= fontSize: 18 fontWeight: 'bold' >Name: name</Text> <Text>Id: id</Text> <Text>Birthday: birthday</Text> <Text>Gender: gender</Text> <Image style= width: 100 height: 100 borderRadius: 50 marginTop: 20 source= uri: picturedataurl /> </View> ; } { return <View style=stylescontainer> <View style= marginTop: 30 > <TouchableOpacity style=stylesbuttonStyle onPress=thislogin> <Text style= color: '#fff' fontSize: 18 >Login</Text> </TouchableOpacity> <TouchableOpacity style=stylesbuttonStyle onPress=thislogout> <Text style= color: '#fff' fontSize: 18 >Logout</Text> </TouchableOpacity> </View> this </View> ; } const styles = StyleSheet;