| Android | iOS |
|---|---|
 |
 |
yarn add rn-zalo or npm i rn-zalo --save- iOS: https://developers.zalo.me/docs/sdk/ios-sdk-9
- Android: https://developers.zalo.me/docs/sdk/android-sdk-8
identifier = “zalo”, URL Schemes = “zalo-<YOUR_APP_ID>”
#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];
}
- Add
import com.zing.zalo.zalosdk.oauth.ZaloSDKApplication;to the imports - Add
ZaloSDKApplication.wrap(this)on "onCreate" function
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);
}
}
implementation "com.zing.zalo.zalosdk:core:+"
implementation "com.zing.zalo.zalosdk:auth:+"
implementation "com.zing.zalo.zalosdk:openapi:+"
<resources>
<string name="app_name">App Name</string>
<string name="appID"><YOUR_APP_ID></string>
</res>
<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>
-keep class com.zing.zalo.**{ *; }
-keep enum com.zing.zalo.**{ *; }
-keep interface com.zing.zalo.**{ *; }
import {
StyleSheet,
View,
TouchableOpacity,
Image,
Text,
} from 'react-native';
import React from 'react';
import RNZalo from 'rn-zalo';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
login = async () => {
try {
const data = await RNZalo.login();
this.setState({ data });
} catch (e) {
console.log('e', e);
}
};
logout = () => {
RNZalo.logout();
};
renderUser() {
if (!this.state.data) {
return null;
}
const { birthday, gender, id, picture, name } = this.state.data.user;
return (
<View style={styles.userInfoContainer}>
<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: picture.data.url }}
/>
</View>
);
}
render() {
return (
<View style={styles.container}>
<View style={{ marginTop: 30 }}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.login}>
<Text style={{ color: '#fff', fontSize: 18 }}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.logout}>
<Text style={{ color: '#fff', fontSize: 18 }}>Logout</Text>
</TouchableOpacity>
</View>
{this.renderUser()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
userInfoContainer: {
flexGrow: 1,
flexShrink: 1,
alignItems: 'center',
},
buttonStyle: {
alignSelf: 'center',
paddingVertical: 10,
paddingHorizontal: 20,
backgroundColor: 'blue',
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,
marginVertical: 10,
},
});- If you see the warning
RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks=> Follow this link facebook/react-native#16376 (comment) to resolve it
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent