Nested Public Modules

    rn-zalo

    2.1.2 • Public • Published

    React Native Zalo

    npm version npm MIT Platform - Android and iOS

    Android iOS

    Installation

    yarn add rn-zalo or npm i rn-zalo --save

    Zalo SDK Documents

    Manual installation

    iOS

    1. Install pod: cd ios && pod install
    2. Add url type Main target setting -> info -> URL types -> click +

    identifier = “zalo”, URL Schemes = “zalo-<YOUR_APP_ID>”

    3. Open AppDelegate.m
    #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

    1. Open up android/app/src/main/java/[...]/MainApplication.java
    • Add import com.zing.zalo.zalosdk.oauth.ZaloSDKApplication; to the imports
    • Add ZaloSDKApplication.wrap(this) on "onCreate" function
    2. Open up android/app/src/main/java/[...]/MainActivity.java
    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);
       }
    }
    
    3. Insert the following lines inside the dependencies block in android/app/build.gradle
    implementation "com.zing.zalo.zalosdk:core:+"
    implementation "com.zing.zalo.zalosdk:auth:+"
    implementation "com.zing.zalo.zalosdk:openapi:+"
    4. Add appId to android/app/src/main/res/values/strings.xml
    <resources>
        <string name="app_name">App Name</string>
        <string name="appID"><YOUR_APP_ID></string>
    </res>
    
    5. Add code bellow to android/app/src/main/res/AndroidManifest.xml
     <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>
    
    6. Open proguard-rules.pro file add code below
    -keep class com.zing.zalo.**{ *; }
    -keep enum com.zing.zalo.**{ *; }
    -keep interface com.zing.zalo.**{ *; }

    Usage

    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,
      },
    });

    Install

    npm i rn-zalo

    DownloadsWeekly Downloads

    25

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    223 MB

    Total Files

    18196

    Last publish

    Collaborators

    • phithudev