Package Exports

azstack-react-native

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (azstack-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

1. Installation

Install package

    npm install --save azstack-react-native

1.1. Core

1.1.1. Install socket.io-client https://github.com/socketio/socket.io-client

1.1.2. Install jsencrypt https://github.com/travist/jsencrypt

1.1.3. Install react-native-webrtc https://github.com/oney/react-native-webrtc

1.2. Sdk

1.2.1. Install react-native-image-crop-picker https://github.com/ivpusic/react-native-image-crop-picker

1.2.2. Install react-native-document-picker https://github.com/Elyx0/react-native-document-picker

1.2.3. Install react-native-video https://github.com/react-native-community/react-native-video

1.2.4. Install react-native-swiper https://github.com/leecade/react-native-swiper

1.2.5. Install react-native-audio https://github.com/jsierles/react-native-audio

1.2.6. Install react-native-fs https://github.com/itinance/react-native-fs

1.2.7. Install react-native-sketch-canvas https://github.com/terrylinla/react-native-sketch-canvas

1.2.8. Install react-native-maps https://github.com/react-community/react-native-maps

1.2.9. Install react-native-google-places https://github.com/tolu360/react-native-google-places

1.2.10. Install react-native-device-info https://github.com/rebeccahughes/react-native-device-info

1.2.11. Install react-native-fcm https://github.com/evollu/react-native-fcm (Android only)

1.2.12. Install PushNotificationIOS https://facebook.github.io/react-native/docs/pushnotificationios.html (iOS only)

1.2.13. Install react-native-incall-manager https://github.com/zxcpoiu/react-native-incall-manager

1.2.14. Install react-native-zip-archive https://github.com/mockingbot/react-native-zip-archive

2. Usage

    import AZStackSdk from 'azstack-react-native/sdk/';

    componentDidMount() {
        this.refs.AZStackSdk.connect().then((result) => {
            this.setState({ authenticatedUser: result });
        }).catch((error) => {});
    };

render() {
    ...
    let azstackConfig = {
        requestTimeout: 60000,
        intervalPingTime: 60000,
        autoReconnect: true,
        autoReconnectLimitTries: 10,
        autoReconnectIntervalTime: 5000,
        logLevel: 'ERROR',
        authenticatingData: {
            appId: '',
            publicKey: '',
            azStackUserId: '',
            userCredentials: '',
            fullname: '',
            namespace: ''
        }
    };
    let defaultLayout = {
        withStatusbar: true,
        withHeader: true,
        screenStyle: {},
        statusbarStyle: {}
    };
    let languageCode = 'en';
    let themeName = 'classic';
    let getInitialMembers = (options) => {
        return new Promise((resolve, reject) => {
            resolve(['test_user_1', 'test_user_2', 'test_user_3'].filter((member) => {
                return member.indexOf(options.searchText) > -1;
            }));
        });
    };
    let getMoreMembers = (options) => {
        return new Promise((resolve, reject) => {
            resolve(false);
        });
    };
    let getFromPhoneNumbers = (options) => {
        return new Promise((resolve, reject) => {
            resolve([]);
        });
    };
    let getPaidCallTags = (options) => {
        return new Promise((resolve, reject) => {
            resolve('');
        });
    };
    let onBeforeMessageSend = (message) => {
        return new Promise((resolve, reject) => {
            resolve(message);
        });
    };
    let onBeforeCalloutStart = (calloutData) => {
        return new Promise((resolve, reject) => {
            resolve(calloutData);
        });
    };
    ...
    return (
        <AZStackSdk
            ref={'AZStackSdk'}
            options={{
                azstackConfig: azstackConfig,
                defaultLayout: defaultLayout,
                languageCode: languageCode,
                getInitialMembers: getInitialMembers,
                getMoreMembers: getMoreMembers,
                getFromPhoneNumbers: getFromPhoneNumbers,
                getPaidCallTags: getPaidCallTags,
                onBeforeMessageSend: onBeforeMessageSend,
                onBeforeCalloutStart: onBeforeCalloutStart
            }}
        >
    )
    ...
}

APIS

List conversations

    this.refs.AZStackSdk.showConversations(screenOptions)

How to start chat

    this.refs.AZStackSdk.startChat({
        chatType: '', // 1: CHAT_TYPE_USER, 2: CHAT_TYPE_GROUP
        chatId: 0,
        // other screenOptions
    });

Show number pad for callout

    this.refs.AZStackSdk.showNumberPad(screenOptions)

How to start callout

    this.refs.AZStackSdk.startCallout({
        callData: {
            fullname: 'Some name',
            toPhoneNumber: '0123456789',
            fromPhoneNumber: '0123456789',
        },
        onEndCall: () => {
            // or whatever you want here
        },
        // other screenOptions
    });

How to start video call

    this.refs.AZStackSdk.startVideoCall({
        callData: {
            fullname: 'User 2',
            toUserId: 387212, // must be number
        },
        onEndCall: () => {
            // or whatever you want here
        },
        // other screenOptions
    });

How to start audio call

    this.refs.AZStackSdk.startAudioCall({
        callData: {
            fullname: 'User 2',
            toUserId: 387212, // must be number
        },
        onEndCall: () => {
            // or whatever you want here
        },
        // other screenOptions
    });

Show call logs

    this.refs.AZStackSdk.showCallLogs(screenOptions)

Show user info

    this.refs.AZStackSdk.showUser(screenOptions)

Show group info

    this.refs.AZStackSdk.showGroup(screenOptions)

screenOptions

{
    onBackButtonPressed: () => {},
    screenStyle: {},
    statusbarStyle: {},
    withStatusbar: true | false, // true by default, overwrite defaultLayout
    withHeader: true | false, // true by default, overwrite defaultLayout
}

For more detail about how it work

Visit https://github.com/azstack/azstack-react-native/blob/master/docs/Usage.md